Javascript手把手教你做商品放大镜效果

<!DOCTYPE html>
<html>
    <!--放大镜的原理是设置两张图片一张正常 一张放大后的
     放大后的设为隐藏 鼠标移入时候显示 然后在正常那边有一个小框
     鼠标移动时候移动小框 然后拿小框left/top除以图片的宽/高
     得到一个比值,拿比值去乘以大图片的宽/高
     就可以得到大图片要移动的距离-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .wrap {
                width: 650px;
                height: 432px;
                position: relative;
            }

            .box {
                position: relative;
                width: 650px;
                height: 432px;
            }

            .box img {
                width: 650px;
                height: 432px;
            }

            .bigImg {
                width: 650px;
                height: 432px;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 660px;
                display: none;
            }

            .bigImg img {
                position: absolute;
                width: 1300px;
                height: 864px;
            }

            .moveBox {
                display: none;
                position: absolute;
                width: 325px;
                height: 216px;
                top: 0;
                left: 0;
                background: rgba(255, 0, 255, 0.3);
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <div class="box">
                <img src="timg.jpg" alt="" />
                <div class="moveBox"></div>
            </div>
            <div class="bigImg">
                <img src="timg.jpg" alt="" />
            </div>
        </div>
    </body>
    <script>
        //布局的话就是需要准备两张图片 一张正常 一张是放大后的;
        //      获取放图片的框框
        var box = document.getElementsByClassName('box')[0];
        //      获取移动的红色小框框      
        var moveBox = document.getElementsByClassName('moveBox')[0];
        //      获取右边放大镜的框框
        var big = document.getElementsByClassName('bigImg')[0];
        //      获取右边放大镜里面的图片        
        var bigImg = big.getElementsByTagName('img')[0];
        //      鼠标移入放图片框框触发移入事件;显示红色盒子和右边放大镜
        box.onmouseenter = function() {
            moveBox.style.display = 'block';
            big.style.display = 'block';
        //      鼠标在盒子中移动时触发的事件  
            box.onmousemove = function(ev) {
                var ev = ev || event;
//              获取鼠标在盒子内的x/y值 等于鼠标位置减去大盒子的offsetleft/top 然后为了鼠标居于红色盒子中心所以要减去小盒子的宽/高的一半;
                var x = ev.clientX - box.offsetLeft - moveBox.offsetWidth / 2;
                var y = ev.clientY - box.offsetTop - moveBox.offsetHeight / 2;
                //设置边界 小于0 或者大于大盒子减小盒子的宽/高;
                if (x < 0) {
                    x = 0;
                } else if (x > box.offsetWidth - moveBox.offsetWidth) {
                    x = box.offsetWidth - moveBox.offsetWidth;
                }
                if (y < 0) {
                    y = 0;
                } else if (y > box.offsetHeight - moveBox.offsetHeight) {
                    y = box.offsetHeight - moveBox.offsetHeigth;
                }
//              将得到的x/y值 赋予小盒子的left/top 小盒子就会跟着鼠标移动

                moveBox.style.left = x + 'px';
                moveBox.style.top = y + 'px';

//              然后用得到的x/y去除以大盒子的宽/高 得到一个比值
                var proX = x / box.offsetWidth;
                var proY = y / box.offsetHeight;
//              比值乘以大图片的宽/高就是大图片的移动距离
                var imgX = proX * bigImg.offsetWidth;
                var imgY = proY * bigImg.offsetHeight;
                //注意大图片的移动方向应该与鼠标移动方向相反所以要乘以负数
                bigImg.style.left = -imgX + 'px';
                bigImg.style.top = -imgY + 'px';
            };
//          最后鼠标移开大大盒子事件 将小红色盒子和右边放大镜设为隐藏并且清空事件
            box.onmouseleave = function() {
                moveBox.style.display = 'none';
                big.style.display = 'none';
                box.onmousemove = box.onmouseleave = null;
            }
        };
    </script>

</html>
放大镜demo下载
Javascript手把手教你做商品放大镜效果

猜你喜欢
