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

来源：互联网发布：站点数据和格点数据编辑：程序博客网时间：2024/06/05 21:02
<!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下载
阅读全文
1 0