jQuery 如何实现放大器效果

我又来了

今天的内容时如何实现放大器效果

我们在看网购的时候，每个商品都有详细的介绍图片

当我们把鼠标放上去的时候，会出现两个区域

一个区域是选中图片的具体位置

另一个区域是高清大图

需要注意的是，图片尽量为正方形
例

==原理==其实很简单：原图上的遮罩层默认隐藏，将原图放大，并默认隐藏，原图默认显示，当鼠标进入原图时，将大图显示在一个区域内，并显示遮罩层。

查看html代码
查看CSS代码
查看JavaSript代码

首先，写入html代码

<div class="box1">
        <img src="img/02.jpg" alt="">
        <div class="shadow">div>
    div>

    <div class="box2">
        <img id="img" src="img/02.jpg" alt="">
    div>

回到顶部

然后，写入CSS样式，默认隐藏

*{
     
            margin: 0;
            padding: 0;
        }
        div{
     
            display: inline-block;
        }
        .box1{
     
            width: 200px;
            height: 200px;
            position: relative;
            vertical-align: top;
            /* margin-left: 50px; */
            border: 1px solid red;
            overflow: hidden;
        }
        .box1 img{
     
            width: 100%;
        }
        .box2 img{
     
            width: 400px;
        }
        .box2{
     
            width: 200px;
            height: 200px;
            overflow: hidden;
            display: none;
            position: relative;
            border: 1px solid black;
        }
        .box2 img{
     
            position: absolute;
            /* top: 0; */
            /* left: 0; */
        }

        .shadow{
     
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 200, 0.6);
            /* top: 0; */
            /* left: 0; */
            display: none;
        }

回到顶部

JavaSript代码

//默认 大图和遮罩层 隐藏，鼠标进入 box1 时显示,离开时再隐藏
        $( ".box1" ).on( "mousemove",function( event ){
     
            $( ".shadow" ).show();
            $( ".box2" ).show();

            //用相对浏览器的距离 减去 可视区域的距离
            //因为图片的位置不一定在页面最左则
            var x=event.pageX - $( ".box1" ).offset().left;
            var y=event.pageY - $( ".box1" ).offset().top;
            console.log( x,y )

            //遮罩层的位置,通过改变css样式
            //上位移量 对应y值，除以 2 
            //左偏移量 对应x值，除以 2
            $( ".shadow" ).css( {
     
                top:`${
        y/2 }px`,
                left:`${
        x/2 }px`
            } )

            //box2 大图位置
            //大图不用除以2
            $( "#img" ).css( {
     
                top:`${
        -y }px`,
                left:`${
        -x }px`
            } )

        } )
        $( ".box1" ).on( "mouseleave",function(){
     
            $( ".shadow" ).hide();
            $( ".box2" ).hide();
        } )

回到顶部

好啦，今天发布的有点晚，诸位见谅
我们下期见，拜拜~~