<!DOCTYPEhtml><htmllang="en"><head><metacharset=utf-8"/><title>文字提示</title><!--引入jQuery--><scriptsrc="scripts/jquery1.7.js"type="text/javascript"></script><styletype="text/css">body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;}img{border:none;}ul,li{margin:0;padding:0;}li{list-style:none;float:left;display:inline;margin-right:10px;border:1pxsolid#AAAAAA;}liaimg{width:100px;height:75px;}/*tooltip*/#tooltip{position:absolute;border:1pxsolid#ccc;background:#333;padding:2px;display:none;color:#fff;}</style><scripttype="text/javascript">//鼠标滑动上去显示放大图片效果修改版$(function(){varx=10;vary=20;$(".tooltipimg").mouseover(function(e){this.myTitle=this.alt;this.title="";varimgTitle=this.myTitle?"<br/>"+this.myTitle:"";vartooltip="<divid='tooltip'><imgsrc='"+this.src+"'alt='"+imgTitle+"'/>"+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></head><body><h4>有效果：</h4><ulclass="tooltip"><li><ahref="#"title="苹果iPod"><imgsrc="p_w_picpaths/apple_1_bigger.jpg"alt="苹果iPod"/></a></li><li><ahref="#"title="苹果iPodnano"><imgsrc="p_w_picpaths/apple_2_bigger.jpg"alt="苹果iPodnano"/></a></li><li><ahref="#"title="苹果iPhone"><imgsrc="p_w_picpaths/apple_3_bigger.jpg"alt="苹果iPhone"/></a></li><li><ahref="#"class="tooltip"title="苹果Mac"><imgsrc="p_w_picpaths/apple_4_bigger.jpg"alt="苹果Mac"/></a></li></ul></body></html>


注意：

该博客有些代码会转掉，如这篇博客50行处代码：

vartooltip="<divid='tooltip'><imgsrc='"+this.src+"'alt='"+imgTitle+"'/>"+imgTitle+"<\/div>";//创建div元素

源代码是


浏览器效果：