京东放大镜

一只桃子~

于 2021-08-20 18:10:44 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/qq_43405603/article/details/119829324

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box1{
            width: 350px;
            height: 350px;
            border:1px solid black;
            position: relative;
        }
        #box1 img{
            display: block;
            width: 100%;
            height: 100%;
        }
        #mark{
            width: 175px;
            height: 175px;
            background: rgba(0,0,0, .3);
            position: absolute;/* */
            top: 0;
            left: 0;
            cursor: move;
        }
        #box2{
        width: 350px;
        height: 350px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
        top: -350px;
        left: 400px;
        }
        #box2 img{
            width: 700px;
            height: 700px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

    </style>
</head>
<body>
    <div id="box1"> 
        <img id="img1" src="./img/iphone.jpg" alt="">
        <!--  -->
    </div>
    <div id="box2">
        <img id="img2" src="./img/iphone_big.jpg" alt="">
    </div>
    <script>
       let box1=document.getElementById("box1");
       let box2=document.getElementById("box2");
       let img2=document.getElementById("img2");

       let mark=null;
       box1.onmouseenter=function(){//移入onmouseover(冒泡引起)
           mark=document.createElement("div");
           mark.id="mark";
           box1.appendChild(mark);//只能放dom
           box2.style.display="block"
       }
       box1.onmousemove=function(e){//移动
         let minL=0;
         let maxL=box1.offsetWidth-mark.offsetWidth;
         let minT=0;
         let maxT=box1.offsetHeight-mark.offsetHeight;
         let left=e.clientX-box1.offsetLeft-87.5;//
         let top=e.clientY-box1.offsetTop-87.5;
           if(left<=minL){
              left=minL;
              
          }
          if(left>=maxL){
             left=maxL;
          }
          if(top<=minT){
              top=minT;
              
          }
          if(top>=maxT){
             top=maxT;
          }
           mark.style.left=left+"px";
           mark.style.top=top+"px";

           img2.style.left=-left*2+"px";
           img2.style.top=-top*2+"px";

       }
       box1.onmouseleave=function(){//移出
           box1.removeChild(mark);
           box2.style.display="none"
       }
    </script>
</body>
</html>

一只桃子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
京东放大镜

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫