图片放大镜

最新推荐文章于 2024-04-06 11:53:25 发布

凉川望远

最新推荐文章于 2024-04-06 11:53:25 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/qq_24193261/article/details/51530467

版权

图片放大镜：

代码

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">

</style>
<script type="text/javascript">
var img1,img2,dd;
window.οnlοad=function(){
img1=document.getElementById("img1");
img2=document.getElementById("img2");
dd=document.getElementById("dd");
img1.addEventListener("mouseover",function(){
dd.style.display="";
//鼠标定位在方框中间
var mouseX=event.clientX;
var mouseY=event.clientY;
dd.style.left=mouseX-50+"px";
dd.style.top=mouseY-30+"px";
var rtop=mouseY-10-30;
var rleft=mouseX-10-50;
var rwidth=rleft+100;
var rheight=rtop+60;
img2.style.clip="rect("+rtop+"px "+rwidth+"px "+rheight+"px "+rleft+"px)";
img2.style.zoom=4;
img2.style.left=(510-4*mouseX)/4+60+"px";
img2.style.top=10-mouseY+20+"px";
},true);
img1.addEventListener("mouseout",function(){
dd.style.display="none";
},true);

}
</script>

</head>

<body>
<img id="img1" src="QQ截图20160526000727.png" style=" position:absolute;left:10px;top:10px;width:480px;height:320px;"/>
<img id="img2" src="QQ截图20160526000727.png" style="position:absolute;left:510px;top:10px;width:480px;height:320px;"/>
<div id="dd" style=" position:absolute;left:20px;top:20px;width:100px;height:60px; border:2px solid blue; display:none"></div>
</div>
</body>

</html>

结果：