jquery 鼠标经过显示大图
以下推存一下代码
<!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>图片提示</title><script type="text/javascript" src="jquery1.4.2.js"></script><style type="text/css">/* tooltip import*/#tooltip{position:absolute;border:1px solid #ccc;background:#333;padding:2px;display:none;color:#fff;}</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 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></head><body><h3>有效果：</h3><ul><li><a href="jquerybook.jpg" title="风光 iPod"><img src="jquerybook.jpg" alt="jquery 鼠标通过显示大图"/></a></li></ul><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
? 注意：
?#tooltip{position:absolute;border:1px solid #ccc;background:#333;padding:2px;display:none;color:#fff;}???? 控制大图显示
<a href="jquerybook.jpg" title="风光 iPod"><img src="jquerybook.jpg" alt="jquery 鼠标通过显示大图"/></a>/*title :大图所显示标题，当无标题时，去掉title href:为显示大图的图片路径*/
?带附件下载