jquery悬浮提示框完整实例
更新时间:2016年01月13日 16:29:26 作者:xpsharp
这篇文章主要介绍了jquery悬浮提示框实现方法,涉及jQuery鼠标事件响应及页面元素样式的动态操作技巧,需要的朋友可以参考下
本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考,具体如下:
<html> <head> <script type="text/javascript" src="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> <style type="text/css"> #leo { position: absolute; border: 1px solid grey; opacity: 0.8; background: grey; } </style> </head> <body> <p title="1dfgfdgdfg">If you click on me, I will disappear.</p> <p title="2dgfdgdfgdf">If you click on me, I will disappear.</p> <p title="3dgfdgfdgfder">If you click on me, I will disappear.</p> <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery click([data],fn)使用方法实例介绍
大概意思就是触发每一个匹配元素的click事件,本文通过一个实例为大家详细介绍下jquery click([data],fn)的使用方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助2013-07-07jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
jQuery.uploadifive插件可以很好的解决上传限制图片或文件大小问题,具体实例代码大家参考下本文2017-05-05jquery ui dialog ie8出现滚动条的解决方法
jquery ui 的 dialog 在IE8下会出现不该出现的滚动条,在JQUI的FORUM上SEARCH下,发现也有人碰上,当解决办法就是把滚动条隐藏2010-12-12jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
这篇文章主要介绍了jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点的相关资料,需要的朋友可以参考下2015-12-12jQuery EasyUI API 中文文档 - Documentation 文档
jQuery EasyUI API 中文文档 - Documentation 文档,使用jQuery EasyUI的朋友可以参考下。2011-09-09
最新评论