js之放大镜

来源：互联网发布：js页面重载编辑：程序博客网时间：2024/06/15 15:56

还记得淘宝选购一件商品时，想看看某一部分的细节时的放大镜么？今天我完成了这样一个小功能，分享一下。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script>        var img1,img2,dd;            window.onload = 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;//放大4倍                    img2.style.left = (510-4*mouseX)/4+60+"px";                    img2.style.top = 10-mouseY+40+"px";                },true);                img1.addEventListener("mouseout",function(){                    dd.style.display="none";                },true);            }        </script>    </head>    <body>        <img id="img1" src="img/3.png" style="position: absolute;left:10px;top: 10px;width: 480px;height: 320px;"/>        <img id="img2" src="img/3.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: 1px solid red;display: none;">    </body></html>

实现效果：
这里写图片描述
总结：加油！

1 0