简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript – Ein kleines Problem mit der js-Lupe.
伊谢尔伦
伊谢尔伦 2017-05-19 10:15:24
0
1
575

JS-Lupe scheint den Code grundsätzlich zu verstehen, aber es gibt einen Code, den ich getestet habe, und ich kenne den Effekt, aber ich weiß nicht, warum er so geschrieben ist?
Das Bild kann nicht hochgeladen werden, ich weiß nicht warum. Dann kommen wir zum Code. Jeder, der diese Funktion erstellt, sollte damit vertraut sein. 

<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";

    }

Darunter x = small.offsetWidth - mask.offsetWidth, ich verstehe diesen Code nicht. Sollten beide Werte nicht fest sein, um small.offsetWidth - mask.offsetWidth zu testen? Testen: x ist ein variabler Wert. Funktionell sollte x eine Variable sein. Aber sollten small.offsetWidth und mask.offsetWidth nicht feste Werte sein?

伊谢尔伦
伊谢尔伦

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

Antworte allen(1)
習慣沉默
習慣沉默2017-05-19 10:17:24 1 Etage 
//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宽度，代表就是右边越界，取一个边界值就可以了、
    
}

所以，这个if(){}else if(){}就是用来做边界控制的。前面是左边界，后面是右边界

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！