京东放大镜效果的实现

版权声明： https://blog.csdn.net/weixin_41849462/article/details/81559326

放大镜效果的实现原理就是按照比例实现元素移动，因此，一定要搞清楚比例关系。

首先进行布局

 <div class="wrap">
        <div id="spic">
            <img src="images/2.jpg" alt="">
            <div id="sf"></div>
        </div>
        <div id="bf">
            <img src="images/2.jpg" alt="" id="bpic">
        </div>
        <div id="ulist">
            <a href="javascript:;" id="left">&lt;</a>
            <div id="list">
                <ul>
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/6.jpg" alt=""></li>
                    <li><img src="images/3.jpg" alt=""></li>
                    <li><img src="images/4.jpg" alt=""></li>
                    <li><img src="images/5.jpg" alt=""></li>
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/3.jpg" alt=""></li>
                    <li><img src="images/2.jpg" alt=""></li>
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/6.jpg" alt=""></li>

                </ul>
            </div>
            <a href="javascript:;" id="right">&gt;</a>
        </div>
    </div>

微调一下样式

* {
    padding: 0px;
    margin: 0px;
}

.wrap {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    position: relative;
}

#spic {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    float: left;
    position: relative;
}

#spic img {
    width: 400px;
    height: 400px;
}

#sf {
    width: 50px;
    height: 50px;
    background: lightblue;
    opacity: 0.3;
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
}

#bf {
    width: 400px;
    height: 500px;
    border: 1px solid #000;
    float: left;
    overflow: hidden;
    position: relative;
    left: 10px;
    visibility: hidden;
}

#bf img {
    position: absolute;
    left: 0px;
    top: 0px;
}

#ulist {
    position: absolute;
    left: 0px;
    bottom: 15px;
    width: 402px;
    height: 56px;
    overflow: hidden;
}

#ulist a {
    float: left;
    width: 10px;
    height: 54px;
    border: 1px solid #ccc;
    text-decoration: none;
    line-height: 56px;
    text-align: center;
    background: #fff;
}

#list {
    float: left;
    margin-left: 18px;
    width: 372px;
    position: relative;
}

ul {
    list-style: none;
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
}

ul li {
    float: left;
    width: 56px;
    height: 56px;
    padding-right: 6px;
}

ul li img {
    width: 52px;
    height: 52px;
    border: 1px solid #ccc;
}

#right {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #333;
}

#left {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    color: #fff;
}

JS代码

;
!(function() {
    function Fdj() {
        this.wrap = document.querySelector('.wrap');
        this.spic = document.querySelector('#spic');
        this.bpic = document.querySelector('#bpic');
        this.sf = document.querySelector('#sf');
        this.lis = document.querySelectorAll('#list li');
        this.bf = document.querySelector('#bf');
        this.ul = document.querySelector('#list ul');
        this.left = document.querySelector('#left');
        this.right = document.querySelector('#right');
    }
    Fdj.prototype = {
        init: function() {
            var _this = this;
            this.spic.onmouseover = function() {
                _this.showfdj();
                _this.sfsize();
                _this.spic.onmousemove = function(e) {
                    var e = e || window.event;
                    _this.sflocation(e);
                }
            }
            this.spic.onmouseout = function() {
                _this.hidefdj();
            }
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].onclick = function() {
                    var url = this.children[0].src;
                    _this.spic.children[0].src = url;
                    _this.bpic.src = url;
                }
            }
            this.liwidth = this.lis[0].offsetWidth;
            this.ul.style.width = this.lis.length * this.liwidth + 'px';
            this.num = 6;
            if (this.lis.length <= 6) {
                this.left.style.color = '#eee';
                this.right.style.color = '#eee';
            }
            this.right.onclick = function() {
                _this.rightclick();
            }
            this.left.onclick = function() {
                _this.leftclick();
            }
        },
        showfdj: function() {
            this.sf.style.visibility = 'visible';
            this.bf.style.visibility = 'visible';
        },
        hidefdj: function() {
            this.sf.style.visibility = 'hidden';
            this.bf.style.visibility = 'hidden';
        },
        sfsize: function() {
            var l = this.bf.offsetWidth * this.spic.offsetWidth / this.bpic.offsetWidth;
            var t = this.bf.offsetHeight * this.spic.offsetHeight / this.bpic.offsetHeight;
            this.sf.style.width = l + 'px';
            this.sf.style.height = t + 'px';
        },
        sflocation: function(e) {
            var l = e.clientX - this.wrap.offsetLeft - this.sf.offsetWidth / 2;
            var t = e.clientY - this.wrap.offsetTop - this.sf.offsetHeight / 2;
            this.bili = this.bf.offsetWidth / this.sf.offsetWidth;
            if (l <= 0) {
                l = 0;
            } else if (l >= this.spic.offsetWidth - this.sf.offsetWidth) {
                l = this.spic.offsetWidth - this.sf.offsetWidth - 2;
            }
            if (t <= 0) {
                t = 0;
            } else if (t >= this.spic.offsetHeight - this.sf.offsetHeight) {
                t = this.spic.offsetHeight - this.sf.offsetHeight - 2;
            }
            this.sf.style.left = l + 'px';
            this.sf.style.top = t + 'px';
            this.bpic.style.left = -l * this.bili + 'px';
            this.bpic.style.top = -t * this.bili + 'px';
        },
        rightclick: function() {
            if (this.num < this.lis.length) {
                this.left.style.color = '#333';
                this.num++;
                if (this.num == this.lis.length) {
                    this.right.style.color = '#eee';
                }
                buffermove(this.ul, { left: -(this.num - 6) * this.liwidth });
            }
        },
        leftclick: function() {
            if (this.num > 6) {
                this.right.style.color = '#333';
                this.num--;
                if (this.num <= 6) {
                    this.left.style.color = '#eee';
                }
                buffermove(this.ul, { left: -(this.num - 6) * this.liwidth });
            }
        }

    }

    var f1 = new Fdj();
    f1.init();
})();

效果：