鼠标悬浮一行弹出提示文本说明效果

我心飞翔 分类:实例代码

有时候,我们希望能够再鼠标悬浮一行的时候弹出提示说明效果。

下面就通过代码实例介绍一下如何使用jquery实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#leo {
  position: absolute;
  border: 1px solid grey;
  opacity: 0.8;
  background: grey;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  x = 5;
  y = 15;
  $("p").hover(function (e) {
    otitle = this.title;
    this.title = "";
    var ndiv = "<div id='leo'>" + otitle + "</div>";
    $("body").append(ndiv);
    $("#leo").css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    }).show(2000);
    $(this).mousemove(function (e) {
      $("#leo").css({
        "top": (e.pageY + y) + "px",
        "left": (e.pageX + x) + "px"
      }).show(1000);
    });
  }, function () {
    this.title = otitle;
    $("#leo").remove();
  });
});
</script>
</head>
<body>
  <p title="犀牛前端部落一">只有努力奋斗才会有美好的未来。</p>
  <p title="犀牛前端部落二">犀牛前端部落欢迎您,欢迎提供建议和意见。</p>
  <p title="犀牛前端部落三">本站的url地址是pipipi.net。</p>
  <p title="犀牛前端部落四">只有当前的时间才是最为珍贵的。</p>
</body>
</html>

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

一.代码注释:

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

(2).x = 5和y = 15,用来规定弹出的层距离鼠标指针的距离。

(3).$("p").hover(function (e) {}, function () {}),为p元素注册事件处理函数,也就是规定鼠标悬浮和鼠标离开要执行的函数。

(4). otitle = this.title,获取当前鼠标悬浮的p元素的title属性值,并赋值给变量otitle。

(5).this.title = "",这个代码和上一段代码的目的是为了防止默认的title弹出层的出现,我们要显示的是自定义的。

(6).var ndiv = "<div id='leo'>" + otitle + "</div>",这是弹出的自定义信息层。

(7).$("body").append(ndiv),追加到body中。

(8).$("#leo").css({

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

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

}).show(2000),设置弹出层的坐标,并且显示出来。

(9). $(this).mousemove(function (e) {

  $("#leo").css({

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

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

  }).show(1000);

}),为当前元素注册mousemove事件处理函数。

也就是实现了当鼠标移动的时候,弹出层能够跟随移动。

(10).function () {

  this.title = otitle;

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

}),规定当鼠标离开时候,将元素的title属性复原,并且移除弹出层。

二.相关阅读:

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

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

(3).css()可以参阅jQuery css()一章节。

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

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

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

鼠标悬浮一行弹出提示文本说明效果,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮一行弹出提示文本说明效果就介绍到这了。

鼠标悬浮一行弹出提示文本说明效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容