jquery鼠标颠末淡入显示提示框

我看了JQuery教程学会了鼠标事件,做了这个颠末期会有对话框出来,是渐显的,还会跟从鼠标提示,利用a标签的title也可以是做到提示,但不是很有本性。我照旧较量喜欢这个jq的提示特效,可以做在要害词上照旧不错的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery鼠标颠末淡入显示提示框 演示</title> <script type="text/javascript" src=""></script> <style type="text/css"> .div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;} div#tip{ position:absolute; width:100px; height:auto; border:1px solid #00CC66;} .div1{border:0;cursor:pointer;width:auto; height:auto;} </style> </head> <body> <div>提示内容</div> <div></div> <div></div> <div>enenba</div> <script type="text/javascript"> $(document).ready(function(){ $('.div').hover( function(){ $('#tip').fadeIn('slow'); } ); $('.div').mousemove(function(e){ var top = e.pageY+5; var left = e.pageX+5; $('#tip').css({ 'top' : top + 'px', 'left': left+ 'px' }); }); $('.div').mouseout(function(){ $('#tip').hide(); }); }); </script> </body> </html>

看附件演示

end

附件下载/演示源码:
【 mouse.html 】 1.04KB

上一篇: 扒谱,扒站,扒特效,扒数据,扒东西.....   |   下一篇:emlog显示评论者的站点机房» 标签:

分享到: 更多

相关日志:

event.preventDefault

利用JQuery 到达淡入谈出显示埋没的结果

tab申缩滑动特效 JQ插件kwicks

phpQuery—基于jQuery的PHP实现

第一次利用jquery

jquery取表单的值

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/7851.html