jquerytitle提示效果,jquerytip提示效果资源-CSDN文库

共2个文件

js：1个

htm：1个

jquery

title

jquery提示效果

3星 · 超过75%的资源需积分: 50 168 浏览量 2011-09-02 18:51:32 上传评论收藏 34KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

JQ_title提示效果.rar （2个子文件）

jquery.tip.js 115KB

jquery title提示效果.htm 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现的简单文字提示效果</title>  <script src="jquery.tip.js" type="text/javascript"></script> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } </style> <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素文字提示 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).show("fast"); //设置x坐标和y坐标，并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e){ $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) //]]> </script> </head> <body> <h1 align="center">jQuery实现的简单文字提示效果</h1> <br /><br /> <h2 align="center">由于是在线预览，请按F5刷新一下以便加载jQuery库，下载代码不存在此问题</h2> <br /> <h2 align="center">请将鼠标指向超链接文字</h2> <p><a href="#" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提示1.">jQuery提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提提示2.">jQuery提示2.</a></p> <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> </body> </html>

评论收藏

内容反馈