在很多网页上特别是电商网站上我们经常看到当我们的鼠标悬停在某张图片上时会有类似放大镜的效果，老规矩，放上效果图： HTML代码：
<div id="normal"> <img src="./1.jpeg" /> <div id="show"></div> </div> <div id="big"><img src="./1.jpeg" /></div>CSS代码：
*{ margin:0;padding:0; } #normal{ position:relative; width:300px; height:200px; border:1px solid #000; } #normal img{ width:100%; height:100%; } #show{ width:50px; height:50px; background:#FF0; opacity:0.3; position:absolute; top:0;right:0; cursor:move; display:none; } #big{ width:300px; height:200px; overflow:hidden; position:relative; padding:10px; margin:10px; } #big>img{ position:absolute; top:0;left:0; width:1200px; height:800px; }JS代码：
$(function(){ $('#normal').mouseover(function(){ //鼠标移入"显示"方块 $('#show').show(); $(this).mousemove(function(ev){ //鼠标移动方块随着移动 $('#show').css({ 'left':ev.pageX-$('#show').width()/2, 'top':ev.pageY-$('#show').height()/2 }) //防止方块移出图片内容 if($('#show').offset().top>$(this).height()-$('#show').height()){ $('#show').css('top',$(this).height()-$('#show').height()); }else if($('#show').offset().left>$(this).width()-$('#show').width()){ $('#show').css('left',$(this).width()-$('#show').width()); }else if($('#show').offset().bottom>$(this).height()-$('#show').height()){ $('#show').css('bottom',$(this).height()-$('#show').height()); }else if($('#show').offset().right>$(this).width()-$('#show').width()){ $('#show').css('right',$(this).width()-$('#show').width()); } //在大容器显示放大图片 $('#big').find('img').css({ 'left':-1200*$('#show').offset().left/300, 'top':-800*$('#show').offset().top/200 }); }); }); //鼠标移出图片让方块"消失" $('#normal').mouseout(function(){ $('#show').hide(); }); });