自定义鼠标悬浮链接弹出提示代码实例

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

鼠标悬浮链接会弹出一个提示效果,这个效果是利用title属性定义的。

不过自带的这个提示不够美观,在实际应用中很难满足需要,下面就通过代码实例介绍一下如何自定义此效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
span {
  background-color: #dedebe;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
  var x = 5;
  var y = 10;
  $("a.tooltip").mouseover(function() {
    this.myTitle = this.title;
    this.title = "";
    var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>";
    $("body").append(tooltip);
    $(this).mousemove(function(e){
      $("#tooltip").css({
        position : "absolute",
        left : (e.pageX + x) + "px",
        top : (e.pageY + y) + "px"
      }).show("fast");
    })
  }).mouseout(function() {
    $(this).unbind("mousemove");
    this.title = this.myTitle;
    $("#tooltip").remove();
  });
});
</script>
</head>
<body>
<a href="#" class="tooltip" title="pipipi.net">犀牛前端部落欢迎您</a>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

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

(2).var x = 5,声明一个变量并赋值为5,用来规定鼠标指针距离弹出层横向距离。

(3).var y = 10,声明一个变量并赋值为5,用来规定鼠标指针距离弹出层的纵向距离。

(4). $("a.tooltip").mouseover(function() {}),为链接注册mouseover事件处理函数。

(5).this.myTitle = this.title,将当前链接的title属性值写入自定义属性myTitle。

(6).this.title = "",将链接的title属性值清空,否则鼠标悬浮的时候,自带的提示层也会展现。

(7).var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>",提示层html字符串。

(8).$("body").append(tooltip),在body内容添加这个提示曾。

(9).$(this).mousemove(function(e){}),注册mousemove事件处理函数。

(10).$("#tooltip").css({

  position : "absolute",

  left : (e.pageX + x) + "px",

  top : (e.pageY + y) + "px"

}).show("fast"),当鼠标移动的时候,弹出层能够实现跟随。

(11).mouseout(function() {

  $(this).unbind("mousemove");

  this.title = this.myTitle;

  $("#tooltip").remove();

}),当鼠标离开链接,那么就会将title属性值还原,同事解绑 mousemove事件处理函数。

并将创建的层删除。

二.相关阅读:

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

(2).append()可以参阅jQuery append()一章节。

(3).mousemove事件可以参阅jQuery mousemove事件一章节。

(4).pageX可以参阅jQuery event.pageX一章节。

(5).mouseout事件可以参阅jQuery mouseout事件一章节。

(6).remove()可以参阅jQuery remove()方法一章节。

自定义鼠标悬浮链接弹出提示代码实例,这样的场景在实际项目中还是用的比较多的,关于自定义鼠标悬浮链接弹出提示代码实例就介绍到这了。

自定义鼠标悬浮链接弹出提示代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容