放大镜：给你个看清钢铁侠的机会

时间 2019-12-02

标签放大镜看清钢铁机会繁體版

原文原文链接

前言：网站

电商网站，随处可见放大镜功能，若是某个电商网站没有这个功能，真是low的一批~
【这话就是我说的，不怕被揍】
一个电商网站连放大镜都没有，请问你对顾客的诚意在哪？？？
复制代码

思路：其实电商的放大镜，初学者会觉得真的是把图放当大了，其实你所看到的大图只不过是一张原图的大图而已。spa

Talk is cheap show you the code！code

【放大镜的格式有不少种，in here,我向你们介绍一种onmousedown\onmouseup\onmousemove版本的】cdn

<body>
        <div class="box>
            <img src="small.jpg" alt="">
            <div class="opacity></div>
        </div>
        
        <div class="big"></div>
        <script>
            var box = document.querySelector('.box');
            var opacity = document.querySelector('opacity');
            var bigImg = document.querySelector(.big);
            opacity.onmousedown = function(evt) {
                bigImg.style.display = "block";
                evt.preventDefault();
                //取得光标的位置
                var x = evt.clientX;
                var y = evt.clientY;
                var distanceX = opacity.offsetLeft;
                var distanceY = opacity.offsetTop;
            box.onmousemove = function(evt) {
                evt.preventDefault()
                var dintX = evt.clientX - x;
                var dintY = evt.clientY - y;
                //对移动后的opacity进行计算
                //【咱们经过光标的移动距离的计算来赋予opacity移动的距离。opacity的距离的计算，等于原来相对其父元素的距离+光标移动的距离】
                opacity.style.left = dintX + distanceX + 'px';
                opacity.style.top = dintY + distance + 'px';
                if(parseInt(opacity.style.left) > 220) {
                    opacity.style.left = 220 + 'px';
                }
                if(parseInt(opacity.style.left) < 0) {
                    opacity.style.left = 0 + 'px';
                }
                if(parseInt(opacity.style.top) > 119) {
                    opacity.style.top = 119 + 'px';
                }
                if(parseInt(opacity.style.top) < 0) {
                    opacity.style.top = 0 + 'px'
                }
                var img = document.querySelector('.big');
                var a = parseInt(opacity.style.left);
                var b = parseInt(opacity.style.top);
                img.style.backgroundPosition = `${-8 * a}px ${-8 * b}px`
                
            }
            window.onmouseup = function(evt) {
                evt.preventDefault();
                box.ommousedown = null;
                box.onmousemove = null;
                bigImg.style.dsiplay = "none";
            }
        }
        </script>
        【咱们在写放大镜的时候，其实有一点的问题是咱们注意的事情。就是咱们的小图片与大图片的长宽比例应该是小图片上的小块块与右边放大的比例相等。这一点是咱们必需要注意的，不然将会形成显示位置不正确的现象。另外大图片与小图片的大小裁切也要等比例】
    </body>
![](https://user-gold-cdn.xitu.io/2019/10/16/16dd38d10ac92241?w=827&h=494&f=png&s=383747)
复制代码