网站超链接和图片提示效果(jquery)

来源：互联网发布：手机网页翻译软件编辑：程序博客网时间：2024/04/30 01:20

1.超链接提示效果：

<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>

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>