标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 7 <script language="javascript"> 8 $(function(){ 9 var offsetX=20-$("#imgtest").offset().left; 10 var offsetY=20-$("#imgtest").offset().top; 11 var size=1.2*$(‘#imgtest ul li img‘).width(); 12 alert(size); 13 $("#imgtest ul li").mouseover(function(event) { 14 15 var $target=$(event.target); 16 if($target.is(‘img‘)) 17 { 18 $("<img id=‘tip‘ src=‘"+$target.attr("src")+"‘>").css({ 19 "height":size, 20 "width":size, 21 "top":event.pageX+offsetX, 22 "left":event.pageY+offsetY, 23 }).appendTo($("#imgtest")); 24 } 25 }).mouseout(function() { 26 $("#tip").remove(); 27 }).mousemove(function(event) { 28 $("#tip").css( 29 { 30 "left":event.pageX+offsetX, 31 "top":event.pageY+offsetY 32 }); 33 }); 34 }) 35 </script> 36 <style type="text/css"> 37 img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;} 38 #imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; } 39 40 41 #imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;} 42 </style> 43 </head> 44 <body> 45 <div id="imgtest"> 46 <ul> 47 <li><img src="img/photo1.jpg" /></li> 48 <li><img src="img/photo2.jpg" /></li> 49 <li><img src="img/photo3.jpg" /></li> 50 <li><img src="img/photo4.jpg" /></li> 51 </ul> 52 </div> 53 </body> 54 </html>
function()之前得先加载完图片，不然没效果，用setInterval(函数名,500)方法调用function内的方法可实现，坐标参数可自调。
标签：
原文地址：http://www.cnblogs.com/ShanHeDiao/p/4566761.html
