- 动画效果的链接提示tooltip特效，使用jquery来实现，鼠标放在链接文字上，就会出现一个提示框。和IE默认的链接提示不同，本效果更灵活，可对提示框进行美化、加上动画效果等，美工好的相信可以做出更漂亮的链接文字提示来。
-
<!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><title>jquery链接文字提示动画特效</title><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.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><p><a href="#" class="tooltip" title="源码搜藏网1.">提示1.</a></p><p><a href="#" class="tooltip" title="源码搜藏网-加粗提示2.">提示2.</a></p><p><a href="#" title="这是IE默认的提示效果.">IE默认提示.</a></p></body></html>
标签：网站源码
上一篇：Js跟随鼠标的链接文字提示框