<!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>