<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> #xiao{ width:430px; height:419px; /*border:red 1px solid;*/ margin:100px 0 0 100px; position:relative; } #xiao img{ width:100%; height:100%; /*垂直对齐 中间*/ vertical-align:middle; } #jing{ width:86px; height:82px; background: #00FFFF; opacity:0.4; position:absolute; top:0; left:0; /*display: none;*/ } #da{ width:430px; height:419px; /*溢出:隐藏;*/ overflow:hidden; margin:-419px 0 0 600px; position:relative; /*display: none;*/ } #da img{ width:2150px; height:2095px; position:absolute; } </style> </head> <body> <div id="xiao"> <!--3120 4160--> <!--430 419--> <img src="../../../js/11.9/img/糖糖.jpg"/> <div id="jing"></div> </div> <div id="da"> <!--<img src="jsk的/images/didi.jpg"/ id="pic">--> <img src="../../../js/11.9/img/糖糖.jpg"/ id="pic"> </div> </body></html><script type="text/javascript"> var jing=document.getElementById("jing");//放大镜 var pic=document.getElementById("pic");//放大的图片 var xiao=document.getElementById("xiao")//小的图片 jing.οnmοusedοwn=function(ev){ var ev=ev||window.event; ev.cancelBubble=true; var that=this; var x=ev.clientX-this.offsetLeft; var y=ev.clientY-this.offsetTop; document.οnmοusemοve=function(ev){ var ev=ev||window.event; var l=ev.clientX-x; var ll=xiao.offsetWidth-that.offsetWidth; var t=ev.clientY-y; var tt=xiao.offsetHeight-that.offsetHeight; if(l<=0){ l=0; } else if(l>=ll){ l=ll; } if(t<=0){ t=0; } else if(t>=tt){ t=tt; } that.style.left=l+"px"; that.style.top=t+"px"; pic.style.left=-5*parseInt(that.style.left)+"px"; pic.style.top=-5*parseInt(that.style.top)+"px"; } document.οnmοuseup=function(){ document.οnmοusemοve=null; document.οnmοuseup=null; } return false; }</script>
转载于:https://www.cnblogs.com/liancai001/p/10156635.html
相关资源：Android放大镜实现