简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - A small problem with js magnifying glass.
伊谢尔伦
伊谢尔伦 2017-05-19 10:15:24
0
1
571

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() {   // 鼠标经过显示出他们
        mask.style.display = "block";
        big.style.display = "block";
    };
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠标在small 内移动
   var x = 0;
   var y = 0;
    small.onmousemove = function(event) {
        var event = event || window.event;
         x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;// 再某个盒子内的坐标

         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";
         /*计算  ：  夫子 一顿吃 2个馒头    娇子  一顿 4个馒头
         问  夫子今天吃了 3个馒头  娇子应该吃几个？  */
         /*计算出他们的倍数   4 / 2    2倍
          3 * 2  == 6个  */
         /* 大图盒子 /  小图盒子  倍数
          我们 再小图移动的距离 *  倍数  ==  大图的位置*/
         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?

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(1)
習慣沉默
習慣沉默2017-05-19 10:17:24 1 floor 
//this.offsetParent.offsetLeft 父级的偏移量left
//mask.offsetWidth /2 自己的宽度除以二，中心
//event.clientY 在客户端的位置。
//event.clientY-this.offsetParent.offsetLeft 当前鼠标在当前父级的坐标点。
//event.clientY-this.offsetParent.offsetLeft - mask.offsetWidth /2 调整当前鼠标的位置为中心点

x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;
if(x < 0){
     x = 0;//如果x小于0，就让盒子当做0处理，不去越界，如果x>
 }else if(x > small.offsetWidth - mask.offsetWidth) {
    x = small.offsetWidth - mask.offsetWidth;//盒子宽度 - mask宽度，代表就是右边越界，取一个边界值就可以了、
    
}

So, this if(){}else if(){} is used for boundary control. The front is the left border, the back is the right border

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！