jQuery实现的鼠标滑过弹出放大图片特效_jquery

全部回答

2023-03-25

0 0

    本章节介绍一下一种比较常用的效果，那就是当鼠标滑过链接的时候，能够出现跟随鼠标指针移动的图层，在实际应用中，一般是对于链接的一些说明文字或者图片等等。我们先来看个演示图下面是代码实例:以上代码实现了我们的要求，小伙伴们觉着怎么样呢接下来我们看看使用方法简要说明：1。
    需要借助a标签的href属性，此jQuery插件的原理是当鼠标移至缩略图（或链接文字时），会加载一段含有href指向路径的大图html片段，该片段根据鼠标的位置绝对定位。
  于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是a标签的href属性的内容。例如：缩略图如果此a标签含有显示大图的方法，则页面就会显示href所指向的“xx。  jpg”这个图片。
  2。使用的方法是：目标选择器。preview();例如上面的缩略图就可以使用$(“a”)。preview();这段代码实现鼠标移到“缩略图”这个文字链接上显示xx。jpg这张图片的效果。3。仅支持png,gif,jpg,bmp四种格式的图片，您可以修改插件代码的正则表达式扩展支持的图片格式类型。
    下面简单介绍一下实现过程:一。代码注释:1。this。screenshotPreview=function(){ }，声明一个函数用来实现跟随效果，在本效果中，this其实是可以省略，它指向window。
  2。xOffset=10，声明一个变量，用来规定鼠标指针距离弹出图片的横向距离。  3。yOffset=30，声明一个变量，用来规定鼠标指针距离弹出图片的纵向距离。4。$("a。
  screenshot")。hover(function(e){}，function(e){})，规定当鼠标移到链接和离开链接所要执行的函数。5。this。t = this。  title，将链接的title属性值赋值给t属性，这里的this是指向当前鼠标悬浮的链接对象。
  6。var c = (this。t != "") ? "" + this。t : ""，如果this。t不为空，也就是存在title属性值，那么插入一个换行符并且连接当前标题内容，否则将c设置为空。
    7。$("body")。append(""+ c +"")，将图片和相关说明添加到body。8。$("#screenshot")。css("top",(e。pageY-xOffset)+"px")。
  css("left",(e。pageX+yOffset)+"px")。  fadeIn("fast")，设置p元素的top和left属性值，并且采用淡入效果展现。9。this。
  title=this。t，将title内容赋值给this。title，其实不要这一句也没有任何问题，有点多余。10。$("#screenshot")。remove()，移出p元素。  11。
  $("a。screenshot")。mousemove(function(e){}），用来设置当鼠标指针移动时，图片能够跟随。12。$("#screenshot")。css("top",(e。
  pageY-xOffset)+"px") 。css("left",(e。  pageX+yOffset)+"px")，设置p元素的top和left属性值，能够实现跟随效果。
  二。1。hover()函数可以参阅jQuery的hover事件一章节。2。append()函数可以参阅jQuery的append()方法一章节。3。css()函数可以参阅jQuery的css()方法一章节。
      4。pageY属性可以参阅jQuery的event。pageY属性一章节。5。fadeIn()函数可以参阅jQuery的fadeIn()方法一章节。
  6。remove()函数可以参阅jQuery的remove()方法一章节。7。mousemove事件可以参阅jQuery的mousemove事件一章节。

提交

相关回答

曹***

2019-06-18

网页怎么实现图片跟随鼠标移动

  下面是实现“图片跟随鼠标移动”效果的代码，实现随着鼠标移动的效果。 <html> <head> <script language="JavaScript"> var newtop=0 var newleft=0 if (navigator。
  appName == "Netscape") { layerStyleRef="layer。"; layerRef="document。layers"; styleSwitch=""; } else { layerStyleRef="layer。
  style。"; layerRef="document。all"; styleSwitch="。style"; } function doMouseMove() { layerName = 'iit' eval('var curElement='+layerRef+'["'+layerName+'"]') eval(layerRef+'["'+layerName+'"]'+styleSwitch+'。
  visibility="hidden"') eval('curElement'+styleSwitch+'。visibility="visible"') eval('newleft=document。
  body。clientWidth-curElement'+styleSwitch+'。pixelWidth') eval('newtop=document。body。clientHeight-curElement'+styleSwitch+'。
  pixelHeight') eval('height=curElement'+styleSwitch+'。height') eval('width=curElement'+styleSwitch+'。
  width') width=parseInt(width) height=parseInt(height) if (event。clientX > (document。body。clientWidth - 5 - width)) { newleft=document。
  body。clientWidth + document。body。scrollLeft - 5 - width } else { newleft=document。body。scrollLeft + event。
  clientX } eval('curElement'+styleSwitch+'。pixelLeft=newleft') if (event。clientY > (document。
  body。clientHeight - 5 - height)) { newtop=document。body。clientHeight + document。body。scrollTop - 5 - height } else { newtop=document。
  body。scrollTop + event。clientY } eval('curElement'+styleSwitch+'。pixelTop=newtop') } document。
  onmousemove = doMouseMove; </script> </head> <body> <script language="javascript"> if (navigator。
  appName == "Netscape") { } else { document。write(' <div ID="OuterDiv">') document。write(' <img ID="iit" src="11。
  gif" //图片地址，自己换哦。STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=103;height=200;visibility:hidden;">') document。
  write(' </div>') } </script> </body> </html> 自己对照着写，希望对你有用。收起

jQuery实现的鼠标滑过弹出放大图片特效_jquery

全部回答

相关回答

网页怎么实现图片跟随鼠标移动

类似问题换一批

热点推荐

热度TOP

热点搜索换一换

jQuery实现的鼠标滑过弹出放大图片特效_jquery

全部回答

相关回答

网页怎么实现图片跟随鼠标移动

类似问题换一批

热点推荐

热度TOP

热点搜索 换一换

热点搜索换一换