有时候,我们希望能够再鼠标悬浮一行的时候弹出提示说明效果。
下面就通过代码实例介绍一下如何使用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()一章节。
鼠标悬浮一行弹出提示文本说明效果,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮一行弹出提示文本说明效果就介绍到这了。
鼠标悬浮一行弹出提示文本说明效果属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98500.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。