原始状态： 鼠标经过： 复制代码 代码如下: 无标题文档 <BR>$(function(){ <BR>var offsetX=20-$("#imgtest").offset().left; <BR>var offsetY=20-$("#imgtest").offset().top; <BR>var size=1.2*$('#imgtest ul li img').width(); <BR>$("#imgtest ul li").mouseover(function(event) { <BR>var $target=$(event.target); <BR>if($target.is('img')) <BR>{ <BR>$("<img id='tip' src='"+$target.attr("src")+"' alt="当鼠标移动到图片上时跟随鼠标显示放大的图片效果_jquery" >").css({ <BR>"height":size, <BR>"width":size, <BR>"top":event.pageX+offsetX, <BR>"left":event.pageY+offsetY, <BR>}).appendTo($("#imgtest")); <BR>} <BR>}).mouseout(function() { <BR>$("#tip").remove(); <BR>}).mousemove(function(event) { <BR>$("#tip").css( <BR>{ <BR>"left":event.pageX+offsetX, <BR>"top":event.pageY+offsetY <BR>}); <BR>}); <BR>}) <BR> <BR>img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;} <BR>#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; } <BR>#imgtest ul{ position:relative;width:840px; height:auto; background:#00F;} <BR>#imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;} <BR>
&nbs">