模擬淘寶放大鏡小例子

 body {
                background-color: #D8E7FA;
            }
            /*取消默認(rèn)樣式*/
            ul {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            /*大框樣式*/
            .itmearea {
                position: relative;
                width: 400px;
                height: 480px;
                border: 1px solid #888;
                margin: 100px auto;
            }
            /*下面的距離*/
            .itmearea .pic {
                margin-bottom: 15px;
            }
            /*大框里面的小框*/
            .itmearea .pic .cover {
                display: none;
                position: absolute;
                cursor: all-scroll;
                left: 0;
                top: 0;
                width: 200px;
                height: 200px;
                opacity: .2;
                z-index: 3;
                background: 50% top no-repeat #000;
            }
            /*圖片大小*/
            .itmearea .pic img {
                width: 400px;
                height: 400px;
            }
            /*大框下面的小圖片框*/
            .itmearea .list {
                display: flex;
            }
            /*每一個(gè)小圖*/
            .itmearea .list li {
                margin: auto;
            }
            /*小框里的圖片*/
            .itmearea .list img {
                display: block;
                width: 50px;
                height: 50px;
            }
            /*隱藏的放大鏡*/
            .itmearea .deteil {
                position: absolute;
                display: none;
                top: -1px;
                left: 400px;
                width: 500px; 
                height: 479px;
                border: 1px solid #888;
                background-image: url(img/1.jpg);
                background-size: 150%;
            }
            /*大框下移入小框的邊框*/
            .itmearea .list .current {
                border: 2px red solid;
            }

<div class="itmearea">
        <div class="pic">    
            <img src="img/1.jpg" />
            <div class="cover"></div>
        </div>
        <ul class="list">
            <li><img src="img/1.jpg" class="current" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
        </ul>
        <div class="deteil"></div>
    </div>

 var list = document.querySelector('.list'),
                imgs = list.querySelectorAll('img'),
                
                img = document.querySelector('.pic img'),
                pic = document.querySelector('.itmearea .pic'),
                cover = document.querySelector('.cover'),
                deteil = document.querySelector('.deteil');
    //鼠標(biāo)移入監(jiān)聽事件
            list.addEventListener('mousemove', function(e) {
                //根據(jù)標(biāo)簽判斷  ， 移入哪個(gè)img圖片
                if(e.target.tagName == 'IMG') {
                    img.src = e.target.src;
                    //顯示哪一張圖片
                    deteil.style.backgroundImage = 'url(' + e.target.src + ')';
                    
                    // 遍歷圖片  清空樣式
                    imgs.forEach(function(item) {
                        item.className = '';
                    })
                    //給當(dāng)前圖片添加一個(gè)class類  兩像素的邊框
                    e.target.className = 'current';

                }
            })
            //給大框綁定鼠標(biāo)移入事件
            pic.addEventListener('mousemove', function(e) {
                var x = e.clientX,
                    y = e.clientY,
                    cx = pic.getBoundingClientRect().left,
                    cy = pic.getBoundingClientRect().top,
                    tx = x - cx - 100,
                    ty = y - cy - 100;
                if(tx < 0) {
                    tx = 0;
                }
                if(ty < 0) {
                    ty = 0;
                }
                if(tx > 200) {
                    tx = 200;
                }
                if(ty > 200) {
                    ty = 200;
                }
                
                //鼠標(biāo)移入小框 和 放大鏡顯示
                cover.style.display = 'block'
                deteil.style.display = 'block'
                //顯示放大鏡的位置
                deteil.style.backgroundPosition = tx / 200 * 100 + '% ' + ty / 200 * 100 + '%';
                //小框的位置
                cover.style.left = tx + 'px';
                cover.style.top = ty + 'px';
            })
            //鼠標(biāo)移出  不顯示
            pic.addEventListener('mouseout', function() {
                cover.style.display = 'none'
                deteil.style.display = 'none'
            });