jQuery跟随鼠标移动的弹出层效果

Html

Css

Js

 
  
素材牛一
 
  
素材牛二
 
 

ul li{ height:40px; line-height:40px; list-style:none; } #tooltip{ position:absolute; border:1px #solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; }

$(function (){ var x = 10; var y = 10; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function (){ this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function (e){ $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.8.3

当鼠标悬浮可以弹出跟随鼠标移动的层效果，下面就介绍一下它的实现过程。

代码注释：

（1）.$(function (){})，当稳当结构完全加载完毕再去执行函数中的代码。

（2）.var x = 10，var y = 10，声明两个变量并赋值，它的作用规定，鼠标指针和弹出层在水平方向和垂直方向上的距离。

（3）.$("a.tooltip").mouseover(function(e){})，为具有class属性值为tooltip的a元素注册mouseover事件处理函数。

（4）.this.myTitle = this.title，获取当前鼠标悬浮的链接元素的title属性值，并赋值给自定义属性myTitle 。

（5）.this.title = ""，将当前链接a对象的title属性值情况，之所以这样，是防止当鼠标悬浮的时候出现链接自带的title效果。

（6）.var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"，一个html字符串，这个就是弹出层的结构。

（7）.$("body").append(tooltip)，将弹出层div添加到body。

（8）.$("#tooltip").css({})，设置此弹出层的样式属性值。

（9）."top": (e.pageY + y) + "px"，设置div的top属性值，也就是鼠标指针在文档中的垂直坐标加上预定的y值。

（10）."left": (e.pageX + x) + "px"，设置div的left属性值，也就是鼠标指针在文档中的水平坐标加上预定的x值。

（11）.show("fast")，以动画方式展现弹出层，这里当然是利用的链式调用。

（12）.mouseout(function (){})，为具有class属性值为tooltip的a元素注册mouseout事件处理函数。

（13）.this.title = this.myTitle，还原链接a的title属性值。

（14）.$("#tooltip").remove()，移出弹出层。

（15）.mousemove(function (e){})，为具有class属性值为tooltip的a元素注册mousemove事件处理函数，这里就是实现跟随效果。