类似购物车的放大镜效果_购物车图片放大代码-CSDN博客

本文链接：https://blog.csdn.net/OrdnAry/article/details/108183938

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        #div1 {width:800px;height:500px;position: absolute;left:100px;top:100px;}
        #div1 img{width:100%;height:100%;}
        #div2{width:400px;height:400px;border:1px solid black;overflow: hidden;display: none;
        position: relative;float: right;left:-100px;top:150px;}
        #div2 img{width:1600px;height:1000px;position: absolute;left:0;top:0;}
        #mark{width:200px;height:200px; background-color:white;opacity: 0.5;float: left;position: absolute;left:0;top:0;display: none;}
    </style>
    <script>
       
        window.onload = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            var mark = document.getElementById("mark");
            var bigimg = div2.getElementsByTagName("img")[0];

             div1.onmouseover= function(){
                 //把需要放大的图片和透明板显示
                mark.style.display = 'block';
                div2.style.display = 'block';
             }
             div1.onmousemove= function(ev){
                var e = ev || window.event;
                var l = e.clientX - div1.offsetLeft -100;
                var t = e.clientY - div1.offsetTop -100;
                //返单是否出界
                if(l<=0){
                    l=0;
                }
                if(l>=600){
                    l=600;
                }
                if(t<=0){
                    t=0;
                }
                if(t>=300){
                    t=300;
                }
                //鼠标移动时 透明板跟着移动
                mark.style.left = l  +"px";
                mark.style.top =  t  +"px";

                //放大的板跟随移动 但是上面的2倍 并且是反方向的
                bigimg.style.left = l*-2  +"px";
                bigimg.style.top = t*-2 +"px";
             }
             div1.onmouseout= function(){
                 //鼠标移出 隐藏
                mark.style.display = 'none';
                div2.style.display = 'none';
             }
        }
        
    </script>
</head>
<body>
    <div id="div1">
        <img src="girl.jpg" alt="">
        <div id="mark"></div>
    </div>
    <div id="div2">
        <img src="girl.jpg" alt="">
    </div>
</body>
</html>