jQuery实现多图放大镜效果

css部分

           #contain{
                width:80%;
                height:500px;
                margin:100px auto;
            }
            .left{
                float:left;
                width: 424px;
                display: flex;
                flex-direction: column;
               align-items: center;
               padding-top: 15px;
               border: 1px solid #b0b0b0;
            }
            .right{
                float:left;
                width:350px;
                height:350px;
                overflow:hidden;/*超出部分隐藏*/
                padding:0px;
                display:none;/*默认先不显示*/
            }
            .up{
                width:320px;
                height:200px;
            }
            .up img{
                width:320px;
                height:200px;
            }
            .down{
                padding:20px;
            }
            .down img{
                width:64px;
                height:40px;
                border:3px solid #ccc;
            }

html部分

 <div id="contain">
            <div class="left">
              
                <div class="up"  >
                    <img src="./img/1.png" bigimage>
                </div>
             
                <div class="down">
                  <img src="./img/1.png" smallimage>
                    <img src="./img/2.jpg" smallimage>
                    <img src="./img/3.png" smallimage>
                    <img src="./img/4.png" smallimage>
                    <img src="./img/5.png" smallimage>
                </div>
            </div>
            <div class="right">
                <img src="" mirror>
            </div>
        </div>

引用jQuery

    <script src="./jquery3.5.1.js"></script>  //这里为本地jQuery

js部分

js部分1

1.当鼠标放置在下面的小图片时，改变边框属性
2.更改含有bigimage的img标签的src，进行图片更换

$("[smallimage]").click(function(){
            var address = $(this).css("border","3px solid red").attr("src");
            $("[bigimage]").attr("src",address);
        }).mouseout(function(){
            $(this).css("border","3px solid #ccc");
        });

js部分2

大图鼠标移动事件： 1.设置mirror所在的img标签的display属性为block，即让它显示
2.当鼠标在内部移动的时候，通过计算，在mirror中进行放大显示
鼠标移出事件：
设置mirror不可见 display:none

  $("[bigimage]").mousemove(function(even){
            //获取大图的相对文档的偏移量
            var offset = $(this).offset();
            //获取鼠标相对于大图左上角的x轴偏移量
            var x = even.pageX - offset.left;
            //获取鼠标相对于大图左上角的y轴偏移量
            var y = even.pageY - offset.top;
            //设置放大镜放大倍数，可自行设置
            var multiple = 5.8;
            //获取放大镜所在div的宽度和高度
            var mirrorwidth = $(".right").width();
            var mirrorHeight = $(".right").height();
            //获取bigimage此时的src的值
            var address = $(this).attr("src");
            //更改放大镜的src的值，切换图片
            $("[mirror]").attr("src",address);
            $(".right").css("display","block").scrollLeft(Math.max(x*multiple - mirrorwidth/2.0)).scrollTop(Math.max(y*multiple - mirrorHeight/2.0));
        }).mouseout(function(){
            $(".right").css("display","none");
        });