jquery超链接与图片提示效果的实现代码

我们知道，超链接提示效果可以通过title实现;图片提示效果可以通过alt实现。
本文为大家介绍一种使用jquery实现超链接与图片提示效果的方法，供大家参考。
 
1、超链接提示效果

<script type="text/javascript"> //超链接提示 //www.jbxue.com //<![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>

2、图片提示效果

<script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/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>

您可能感兴趣的文章：
jquery超链接与图片提示效果的实现代码
jquery实现网站超链接和图片提示效果
Jquery hide与toggle方法实现超链接慢慢消失
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
jQuery图片预览插件 imgPreview
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
jquery 指南/入门基础
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jquery的hide及toggle方法让超链接慢慢消失
PHP实现浏览器文件下载图片或者php文件