• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery大图跟随效果代码实例

jQuery 程序员 2年前 (2019-03-29) 283次浏览 已收录 0个评论

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

下面通过实例介绍一下如何实现此效果。

代码实例如下:

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

一.实现原理:

当鼠标放在小图上的时候,能够动态创建一个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=$(“<div id=’newTip’><img src='”+this.href+”‘/><br/>”+title+”</div>”),创建一个节点对象,里面包含有<img>,它的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属性值。


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址