成人精品一区二区三区在线观看,欧美老熟妇videos极品另类,欧美精品videossex少妇

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

js Magnifying Glass It seems that the code can be basically understood, but there is a code that has been tested and I know the effect but I don’t know why it is written like this?
The picture cannot be uploaded, I don’t know why. Then let’s get into the code. Anyone who makes this function should be familiar with it.

<style>
    * {margin: 0;padding: 0;}
    img {
        vertical-align: top;
    }
    .box {
        width: 350px;
        height: 350px;
        margin:100px;
        border: 1px solid #ccc;
        position: relative;
    }
    .big {
        width: 450px;
        height: 450px;
        position: absolute;
        top: 0;
        left: 360px;
        border: 1px solid #ccc;
        overflow: hidden;
        display: none;
    }
    .mask {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
    }
    .small {
        position: relative;
    }
    .big img {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
</head>
<body>
<p class="box" id="fdj">
    <!--小盒子-->
    <p class="small">
        <img src="images/001.jpg" alt=""/>
        <p class="mask"></p>
    </p>
    <p class="big">
        <img src="images/0001.jpg" alt=""/>
    </p>
</p>
</body>
</html>
<script>
   var fdj = document.getElementById("fdj");  // 獲得最大的盒子
    var small = fdj.children[0];  // 獲得small 小圖片 350盒子
    var big = fdj.children[1];  // 獲得 大圖片 800 盒子
    var mask = small.children[1];  // 小的黃色盒子
   var bigImage = big.children[0]; // 大盒子里面的圖片
    small.onmouseover = function() {   // 鼠標(biāo)經(jīng)過顯示出他們
        mask.style.display = "block";
        big.style.display = "block";
    };
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠標(biāo)在small 內(nèi)移動
   var x = 0;
   var y = 0;
    small.onmousemove = function(event) {
        var event = event || window.event;
         x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;// 再某個(gè)盒子內(nèi)的坐標(biāo)

         y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
         if(x < 0)
         {
             x = 0;
         }
         else if(x > small.offsetWidth - mask.offsetWidth)
         {
             **x = small.offsetWidth - mask.offsetWidth;**
         }
         if(y<0)
         {
            y = 0;
         }
         else if(y > small.offsetHeight - mask.offsetHeight)
         {
             y = small.offsetHeight - mask.offsetHeight;
         }
        alert(x);
         mask.style.left = x + "px";
         mask.style.top = y + "px";
         /*計(jì)算  ：  夫子 一頓吃 2個(gè)饅頭    嬌子  一頓 4個(gè)饅頭
         問  夫子今天吃了 3個(gè)饅頭  嬌子應(yīng)該吃幾個(gè)？  */
         /*計(jì)算出他們的倍數(shù)   4 / 2    2倍
          3 * 2  == 6個(gè)  */
         /* 大圖盒子 /  小圖盒子  倍數(shù)
          我們 再小圖移動的距離 *  倍數(shù)  ==  大圖的位置*/
         bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
         bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";

    }

Among them, x = small.offsetWidth - mask.offsetWidth. I don't understand this code. Shouldn't both be fixed values? Use alert to test small.offsetWidth - mask.offsetWidth is a fixed value. Testing x is a variable value. Functionally, x should be a variable. But shouldn’t small.offsetWidth and mask.offsetWidth be fixed values?

//this.offsetParent.offsetLeft 父級的偏移量left //mask.offsetWidth /2 自己的寬度除以二，中心 //event.clientY 在客戶端的位置。 //event.clientY-this.offsetParent.offsetLeft 當(dāng)前鼠標(biāo)在當(dāng)前父級的坐標(biāo)點(diǎn)。 //event.clientY-this.offsetParent.offsetLeft - mask.offsetWidth /2 調(diào)整當(dāng)前鼠標(biāo)的位置為中心點(diǎn) x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; if(x < 0){ x = 0;//如果x小于0，就讓盒子當(dāng)做0處理，不去越界，如果x> }else if(x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth;//盒子寬度 - mask寬度，代表就是右邊越界，取一個(gè)邊界值就可以了、 }