ps:img图片放正方形的图片,注意小图和大图 html========= <div id="div" class="demo"> <div id="small_pic"> <span id="float_layer"></span> <img id='pic1' src="images/small.jpg" alt="放大镜图片一"/> </div> <div id="big_pic"> <img id='pic2' src="images/big.jpg" alt="放大镜图片二"/> </div> </div> css========== *{margin: 0;padding: 0;} #div{ 350px;height: 350px;margin: 30px auto;position: relative;} #small_pic{ 350px;height: 350px;position: relative;} #float_layer{ 100px;height: 100px;background: #fff;opacity:0.3;position: absolute;left: 0;top: 0;display: none;} #big_pic{position: absolute;left: 360px;top: -1px; 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;} #big_pic img{position: absolute;} js=========== function getClass(className) { var tags=document.getElementsByTagName('*'); var arr=[]; for (var i = 0; i < tags.length; i++) { if(tags[i].className.match(new RegExp("(\s+|^)"+className+"(\s+|$)"))){ arr.push(tags[i]); } } return arr; } var small=document.getElementById('small_pic'); var big=document.getElementById('big_pic'); var pic1=document.getElementById('pic1'); var pic2=document.getElementById('pic2'); var float_layer=document.getElementById('float_layer'); var div=document.getElementById('div'); small.onmousemove=function (e) { var e=e||window.e; this.style.cursor='move'; float_layer.style.display=big.style.display='block'; var left=e.clientX-div.offsetLeft-float_layer.clientWidth/2; var top=e.clientY-div.offsetTop-float_layer.clientHeight/2; if(left<0){ left=0; }else if(left>div.clientWidth-float_layer.clientWidth){ left=div.clientWidth-float_layer.clientWidth; } if(top<0){ top=0; }else if(top>div.clientHeight-float_layer.clientHeight){ top=div.clientHeight-float_layer.clientHeight; } float_layer.style.left=left+'px'; float_layer.style.top=top+'px'; var scaleX=left/(div.clientWidth-float_layer.clientWidth); var scaleY=top/(div.clientHeight-float_layer.clientHeight); console.log(scaleX); pic2.style.left=-scaleX*(pic2.clientWidth-250)+'px'; pic2.style.top=-scaleY*(pic2.clientHeight-250)+'px'; } small.onmouseout=function () { float_layer.style.display=big.style.display='none'; }