简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Un petit problème avec la loupe JS.
伊谢尔伦
伊谢尔伦 2017-05-19 10:15:24
0
1
623

La loupe JS semble comprendre fondamentalement le code, mais il y a un code que j'ai testé et je connais l'effet mais je ne sais pas pourquoi il est écrit comme ça ?
Les photos ne peuvent pas être téléchargées, je ne sais pas pourquoi. Passons ensuite au code. Quiconque crée cette fonction devrait la connaître. 

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

    }

Parmi eux, x = small.offsetWidth - mask.offsetWidth, je ne comprends pas ce code. Les deux ne devraient-ils pas être des valeurs fixes ? Utilisez alert pour tester small.offsetWidth - mask.offsetWidth, qui est une valeur fixe. Tester x est une valeur variable. Fonctionnellement, x devrait être une variable. Mais small.offsetWidth et mask.offsetWidth ne devraient-ils pas être des valeurs fixes ?

伊谢尔伦
伊谢尔伦

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

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

Donc, ce if(){}else if(){} est utilisé pour le contrôle des limites. Le devant est la bordure gauche, le dos est la bordure droite

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！