jQuery大图跟随效果代码官方网站yabo88.com

  • 内容
  • 评论
  • 相关

鼠标放在产品的小图上的时候,出现一个可以跟随鼠标指针移动的大图。

下面通过官方网站yabo88.com介绍一下如何实现此效果。

代码官方网站yabo88.com如下:

当鼠标在小图中移动的时候,能够出现一个大图跟随鼠标移动,下面介绍一下实现过程。

一.实现原理:

当鼠标放在小图上的时候,能够动态创建一个div对象节点,此节点中包含有大图,当鼠标离开小图的时候,常见的节点对象会被删除。同时为小图注册mousemove事件处理函数,当鼠标在小图中移动的时候,能够将创建的div的left和top属性值设置为e.pageX+x和e.pageY+y,之所以要加x和y是为了让大图和鼠标指针之间有一定的距离。

二.代码注释:

(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).var x=10,var y=20,用于规定鼠标指针和大图左上角的距离。

(3).$("a.tooltip").hover(function(){}),为class属性值为tooltip的链接注册hover事件处理函数。

(4).var title=this.title;,将链接的title属性赋值给变量title。

(5).var $div=$("


"+title+"
"),创建一个节点对象,里面包含有,它的src属性就是链接的href属性值,并且在图片下面显示title值。

(6).$("body").append($div),在body中添加创建的此节点对象。[

(7).$div.css({"position":"absolute","background":"silver"}).show("fast"),将创建的div设置为绝对定位,并且背景色为silver。

(8).$("#newTip").remove(),移除创建的div节点对象。

(9).mousemove(function(e){}),注册mousemove事件处理函数,e为事件对象。

(10).var $div= $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'}).show("fast"),设置div的left和top属性值。

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery大图跟随效果代码官方网站yabo88.com

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注