放大镜

    <!-- 大图 -->
    <div class="bigImage">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <!-- 放大镜标记 -->
        <div class="mark"></div>
    </div>
    <!-- 缩略图 -->
    <div class="smImage">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
    </div>
</div>
<!-- 弹框 -->
<div class="dialog"></div>
<div class="bg">
    <img src="./img/1.jpg" alt="">
    <img src="./img/2.jpg" alt="">
    <img src="./img/3.jpg" alt="">
    <div id="prev" class="left-icon">&#60;</div>
    <div id="next" class="right-icon">&#62;</div>
</div>

<script src="jquery-3.4.0.js"></script>
<script>
    // 1：js 完成初始化效果
    // 1.1：第一个tab img 透明度为1
    var x = 0; // 表示显示元素的索引值
    $('.smImage>img:eq' + '(' + x + ')').css({ opacity: 1 });
    // 1.2：第一章大图片显示
    $('.bigImage>img:eq' + '(' + x + ')').css({ display: 'block' });
    // 二：分析交互效果
    // 1：tab切换
    // 1.1给tab栏绑定鼠标移入事件
    $('.smImage>img').on('mouseover', (function (event) {
        // 1.2上一张隐藏，上一个tab透明度0.6
        $('.smImage>img:eq' + '(' + x + ')').css({ opacity: 0.6 });
        $('.bigImage>img:eq' + '(' + x + ')').css({ display: 'none' });
        // 1.3当前移入元素透明度1
        x = $(this).index(); // 获取当前下你是元素的索引值
        $('.smImage>img:eq' + '(' + x + ')').css({ opacity: 1 });
        $('.bigImage>img:eq' + '(' + x + ')').css({ display: 'block' });
    }))
    // 2：显示隐藏mark
    // 2.1 当鼠标移动到大图上时，mark为显示，移除为隐藏
    $('.bigImage').on('mouseover', function () {
        $('.mark').css({ display: 'block' })
        // 显示放大镜
        $('.glassView').css({ display: 'block' })
        $('.glassView>img:eq' + '(' + x + ')').css({ display: 'block' })
    })
    $('.bigImage').on('mouseout', function () {
        $('.mark').css({ display: 'none' })
        $('.glassView>img:eq' + '(' + x + ')').css({ display: 'none' })
    })
    //  让mark 与鼠标的位置保持一致
    $('.bigImage').on('mousemove', function (e) {
        // console.log(e.pageX); // 鼠标距离页面左边的位置
        // console.log($(this).offset()); // 元素距离窗口左边的位置
        var left = e.pageX - $(this).offset().left - 50;
        var top = e.pageY - $(this).offset().top - 50;
        if (left < 50) {
            left = 0;
        }
        if (left > 380) {
            left = 380
        }
        if (top < 50) {
            top = 0
        }
        if (top > 170) {
            top = 170;
        }
        $('.mark').css({ left: left, top: top })
        $('.glassView>img:eq' + '(' + x + ')').css({ left: -left * 2 + 'px', top: -top * 2 + 'px' })
    })
    // 3：显示隐藏放大镜
    // 4：放大镜效果




    $('.smImage>img').on('click', function () {
        $('.dialog').fadeIn(800)
        $('.bg').css({display:'block'})
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'block' })
    })


    $('.dialog').on('click',function(){
        $('.dialog').fadeOut(800)
        $('.bg').css({display:'none'})
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'none' })
    })


    // 下一张
    $('#next').on('click',function(){
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'none' })
        x++;
        if(x>2){
            x = 0;
        }
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'block' })
    })
    // 上一张
    $('#prev').on('click',function(){
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'none' })
        x--;
        if(x<0){
            x = 2;
        }
        $('.bg>img:eq' + '(' + x + ')').css({ display: 'block' })
    })
</script>