实现淘宝商品详情页放大镜功能-优快云博客

本文链接：https://blog.youkuaiyun.com/liangjun525/article/details/50524517

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

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