商品放大镜小案例--bom的基本操作

通过仿购物平台的商品放大镜，进一步帮助我们了解一些基础的BOM操作。

---

现在的购物平台都有商品放大镜功能，让用户更好的看清商品的细节，例如京东，淘宝都引用到了该操作。

 

 

 接下来，我们也制作一个简单的商品放大镜小案例。

<div class="zoombox box-englarge" id="box-enlarge">
    <div class="zoompic small-enlarge" id="smallBox-enlarge">
        <!-- 商品展示图 -->
        <div class="big-img">
            <img src="./img/img.jpg" width="100%"/>
        </div>
        <!-- 放大镜 -->
        <div class="glass-enlarge" id="glass-enlarge"></div>
        <!-- 商品放大图 -->
        <div class="big-enlarge" id="bigBox-enlarge">
            <img src="./img/img2.jpg" width="800px" id="bigPic-enlarge"/>
        </div>
    </div>
</div>

.small-enlarge {
    width: 450px;
    height: 450px;
    position: relative;
}


.big-enlarge img {
    position: absolute;
}

/* 商品放大图 */
.big-enlarge {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 500px;
    overflow: hidden;
    display: none;
}

/* 放大镜 */
.glass-enlarge {
    width: 110px;
    height: 110px;
    background-color: rgba(255, 255, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
    display: none;
}

window.onload = function () {
    // 获取各个事件元素的DOM元素
    var smallBox = document.getElementById('smallBox-enlarge');
    var glass = document.getElementById('glass-enlarge');
    var bigBox = document.getElementById('bigBox-enlarge');
    var box = document.getElementById('box-enlarge');
    var bigPic = document.getElementById('bigPic-enlarge');

    // 鼠标经过小盒子，显示大盒子和放大镜
    smallBox.onmouseover = function () {
        bigBox.style.display = 'block';
        glass.style.display = 'block';
    }

    //鼠标移出小盒子，隐藏小盒子和放大镜
    smallBox.onmouseout = function () {
        bigBox.style.display = 'none';
        glass.style.display = 'none';
    }

    smallBox.onmousemove = function (event) {
        // 滚动条移动的距离
        // var st = document.body.scrollTop || document.documentElement.scrollTop;
        // var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
        // var event = event || window.event;
        //pageX,pageY，IE8不支持
        //当有滚轮时，视口区鼠标的坐标clientX，需要加上滚动的距离才为鼠标在页面上的坐标

        // clientX,clientY获取当前视口的坐标，不包含滚动条距离
        //pageX,pageY获取当前窗口坐标，包含滚动条
        // var pageX = event.pageX || event.clientX + sl;
        // var pageY = event.pageY || event.clientY + st;
        
        // 也可以使用 event.clientX + sl 和 event.clientY + st
        var pageX = event.pageX;
        var pageY = event.pageY;

        //计算放大镜的位置
        // 鼠标相对于窗口的距离 减去 box 距离窗口的距离 减去 glass 宽/高的一半

        var targetX = pageX - box.offsetLeft - glass.offsetWidth / 2;
        var targetY = pageY - box.offsetTop - glass.offsetHeight / 2;



        // 将放大镜限制于 box 盒子内
        if (targetX < 0) {
            targetX = 0;
        }
        if (targetY < 0) {
            targetY = 0;
        }
        if (targetX > smallBox.offsetWidth - glass.offsetWidth) {
            targetX = smallBox.offsetWidth - glass.offsetHeight;
        }
        if (targetY > smallBox.offsetHeight - glass.offsetHeight) {
            targetY = smallBox.offsetHeight - glass.offsetHeight
        }

        // 计算得到放大镜相对与box盒子的位置
        glass.style.left = targetX + 'px';
        glass.style.top = targetY + 'px';


        // 计算大图片移动的距离
        var bigMoveX = bigPic.offsetWidth - bigBox.offsetWidth;
        var smallMoveX = smallBox.offsetWidth - glass.offsetWidth;
        var bigMoveY = bigPic.offsetHeight - bigBox.offsetHeight;
        var smallMoveY = smallBox.offsetHeight - glass.offsetHeight;
        var rateX = bigMoveX / smallMoveX;
        var rateY = bigMoveY / smallMoveY;
        bigPic.style.left = -rateX * targetX + 'px';
        bigPic.style.top = -rateY * targetY + 'px';
    }
}

scrollTop，scrollLeft：

当页面出现滚动条时，则表示有部分页面被上卷或者右卷给隐藏，通过上述元素，可以获取被隐藏页面的高度和宽度（注意：是被隐藏页面的高度和宽度，而不是整个页面的高度和宽度）。

clientX，clientY：

表示鼠标距离视口（即当前所视区域的坐标，不包含滚动条隐藏部分）

pageX，pageY ：

表示鼠标距离整个页面的坐标（包含了滚动条隐藏部分，与clientX，clientY相反）

因此，我们在案例中需要获取当前鼠标的坐标位置，可以直接通过pageX和pageY获得，

也可以通过scrollTop，scrollLeft获取隐藏的高度和宽度，在与clientX，clientY当前视口的鼠标位置相加，也可以得到鼠标的坐标位置。

offsetLeft， offsetTop ：

为当前元素的width/height+元素的padding+边框的宽度

offsetWidth，offsetHeight： 

为当前元素距离上一个被定位的元素的宽度和高度

红 - 绿 - 蓝 可以得到放大镜的中心位置，在将该坐标赋予鼠标，就可以得到鼠标在黄色放大镜中间，并且放大镜随着鼠标移动而移动，相对位置保持不变。

判断相对于box盒子的鼠标位置，限制放大镜只在盒子中间移动。

 最后通过放大镜在box盒子中的可移动距离，与大图片在大盒子中的可移动距离的比率，将放大镜移动的距离通过比例转化为大图片移动的距离，即可完成。

图片