<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{margin:0;padding:0;list-style: none} #div1{200px;height:200px;position:absolute;left:100px;border:1px solid #000;top:100px;border:1px solid #000;} #span1{80px;height:80px;background:green;position:absolute;left:0;top:0;z-index:2;opacity:0.4;filter:alpha(opacity:40);cursor: all-scroll;display:none;} #div1 img{200px;height:200px;} #div2{400px;height:400px;overflow: hidden;position:absolute;left:302px;top:100px;border:1px solid #000;display:none;} #div2 img{600px;hgeight:600px;position:absolute;} </style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div id="div1"> <span id="span1"></span> <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt=""> </div> <div id="div2"> <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="" id="img1"> </div> </body> <script> $(function(){ var oDiv1=$('#div1'); var oDiv2=$('#div2'); var oSpan=$('#span1'); var oImg=$('#img1'); oDiv1.mouseover(function(){ oSpan.css({display:'block'}); oDiv2.css({display:'block'}); }); oDiv1.mouseout(function(){ oSpan.css({display:'none'}); oDiv2.css({display:'none'}); }); oDiv1.mousemove(function(ev){ var l=ev.clientX-oDiv1.offset().left-oSpan.outerWidth()/2; var t=ev.clientY-oDiv1.offset().top-oSpan.outerHeight()/2; if(l<0)l=0; if(t<0)t=0; if(l>oDiv1.outerWidth()-oSpan.outerWidth())l=oDiv1.outerWidth()-oSpan.outerWidth(); if(t>oDiv1.outerHeight()-oSpan.outerHeight())t=oDiv1.outerHeight()-oSpan.outerHeight(); oSpan.css({ left:l, top:t }); var scaleX=l/(oDiv1.outerWidth()-oSpan.outerWidth()); var scaleY=t/(oDiv1.outerHeight()-oSpan.outerHeight()); var kL=oImg.outerWidth()-oDiv2.outerWidth(); var kT=oImg.outerHeight()-oDiv2.outerHeight(); oImg.css({ left:-kL*scaleX, top:-kT*scaleY }) }) }) </script> </html>