javascript - js放大镜的一个小问题。
伊谢尔伦
伊谢尔伦 2017-05-19 10:15:24
0
1
644

js放大镜看来代码基本能理解,但是有一句代码测试过了,知道效果但是不知道为什么这么写?
图片不能上传,不知道什么原因。那就上代码吧,做个这个功能的应该很熟。

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

    }

其中 x = small.offsetWidth - mask.offsetWidth这句代码没看懂,两个不应该都是定值么,用alert测试small.offsetWidth - mask.offsetWidth是个定值。测试x就是一个变值,功能来说x应该是个变量的。但是 small.offsetWidth , mask.offsetWidth不因该都是定值么?

伊谢尔伦
伊谢尔伦

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

全部回复(1)
習慣沉默
//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(){}就是用来做边界控制的。前面是左边界,后面是右边界

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板