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

快乐打工仔 分类:实例代码

现在网站都追求人性化,很多时候当鼠标悬浮的时候,能够弹出一个层,并且此层能够跟随鼠标移动,此功能一般常见于标题内容提示,或者弹出大图效果,下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
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; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(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" 
    }); 
  }); 
}) 
</script> 
</head>
<body>
<ul> 
  <li><a href="#" class="tooltip" title="犀牛前端部落欢迎您">犀牛前端部落一</a></li> 
  <li><a href="#" class="tooltip" title="分享和互助是最大的胸怀">犀牛前端部落二</a></li> 
</ul> 
</body>
</html>

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

一.代码注释:

(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事件处理函数,这里就是实现跟随效果。

二.相关阅读:

(1).mouseover事件参阅jQuery mouseover事件一章节。

(2). append()参阅jQuery append()方法一章节。 

(3).css()参阅jQuery css()方法一章节。 

(4).pageY参阅jQuery event.pageY属性一章节。 

(5).show()参阅jQuery show()方法一章节。 

(6).mouseout事件参阅jQuery mouseout事件一章节。

(7).remove()参阅jQuery remove()方法一章节。 

(8).mousemove事件参阅jQuery mousemove事件一章节。

jQuery跟随鼠标移动的弹出层效果,这样的场景在实际项目中还是用的比较多的,关于jQuery跟随鼠标移动的弹出层效果就介绍到这了。

jQuery跟随鼠标移动的弹出层效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容