放大鏡：給你個看清鋼鐵俠的機會

前端小鐵人發表於2019-10-16

前言：

電商網站，隨處可見放大鏡功能，如果某個電商網站沒有這個功能，真是low的一批~
【這話就是我說的，不怕被揍】
一個電商網站連放大鏡都沒有，請問你對顧客的誠意在哪？？？
複製程式碼

思路：其實電商的放大鏡，初學者會以為真的是把圖放當大了，其實你所看到的大圖只不過是一張原圖的大圖而已。

Talk is cheap show you the code！

【放大鏡的格式有很多種，in here,我向大家介紹一種onmousedown\onmouseup\onmousemove版本的】

    <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)
複製程式碼

相關文章