开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

前言

之前我们讲解了点名器的案例，今天我们将案例难度稍微升级一下，实现一个放大器的案例，为了提高效率，我们引入jquery进行开发，具体的效果图如下：

实现

布局

首先我们还是需要把页面布局做出了，根据效果图我们可以分为三部分，左边图片列表，中间原始图片展示，右边放大后的图片，最后用一个wrapper将三部分包裹起来。

左边图片列表。左边图片列表我们直接用img标签，将每个img设置好大小。
中间原始图片。中间展示选中的图片即可，最重要的是上面的放大镜，我们需要利用定位结合着鼠标事件做出来。
右边放大图片。展示放大后的图片，那么我们可以通过将选中区域的宽度跟高度进行放大，利用overflow:hidden将多余的遮住，达到放大的效果。
waraaper。我们可以设置想要的背景颜色，整体大小等属性，让整体看起来更协调。里面的三部分内容利用float浮动进行设置，当然我们也可以使用flex弹性布局进行设置，这里我们任意发挥。

   <style>
     #wrapper{
        width: 1200px;
        height:500px;
        margin: 0 auto;
        padding-top: 40px;
        background: orange;
    }
    .left{
      width: 60px;
      height: 247px;
      float: left;
      margin: 20px 15px;
    }
    .left img{
      width: 60px;
      height: 60px;
    }
    .center{
      width: 500px;
      float: left;
      position: relative;
      height: 305px;
    }
    .glass{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .center img{
        width: 480px;
        height: 300px;
    }
    .right{
        width: 500px;
        float: left;
        height: 300px;
        overflow: hidden;
        display: none;
    }
    .right img{
        width: 1440px;
        height: 900px; 
    }
</style>
<body>
    <div id="wrapper">
        <div class="left"> 
            <!-- src是保存图片的路径 -->
            <img src="imgs/01.jpg">
            <img src="imgs/02.jpg">
            <img src="imgs/03.jpg">
            <img src="imgs/04.jpg">
        </div>
        <div class="center">
            <img src="imgs/01.jpg">
            <div class="glass"></div>
        </div>
        <div class="right">
            <img src="imgs/01.jpg">
        </div>
    </div>
    </body>

实现

首先我们引入jquery，这里我们是下载好了jquery.min.js文件，在页面引入jquery文件即可。我们也可以利用cdn的方式进行引入，使用该方法需要保持网络畅通。

<script src="../js/jquery-3.4.1.min.js"></script>//src是文件所在路径

接下来我们就要一步步实现放大镜的功能：

图片切换。我们图片是默认展示左边列表第一个的，当用鼠标点击图片时候会进行切换，我们给左边图片添加点击事件，当点击的时候将中间图片与右边放大图片的src属性换成点击图片的src就能实现点击切换。

    //切换图片 将每个图片添加点击事件
        $(".left img").click(function(){
        //将src进行替换
            $(".center img").attr("src",$(this).attr("src"))
            $(".right img").attr("src",$(this).attr("src"))
        })

放大镜与右边图片出现。中间图片移入时放大镜与放大图片出现，移出时放大镜与放大图片消失，我们通过鼠标移入移除事件，控制display属性就能实现它们出现消失。

    //通过移入移除控制放大镜跟放大图片出现消失
        $(".center").mouseover(function(){
            $(".glass").show()
            $(".right").show()
        })
        $(".center").mouseout(function(){
            $(".glass").hide()
            $(".right").hide()
        })

图片放大。首先我们获取鼠标位置，然后通过设置left,top属性将放大器的中心位置移动到鼠标所在的位置，最后计算放大比例，移动盒子大小，将放大后的图片展示出来。另外我们还要限制放大器位置，不能超过中间图片所在范围。

//放大效果
   $(".center").mousemove(function(e){
           //计算放大器位置
            var x = e.pageX - $(".center").offset().left-$(".glass").width()/2
            var y = e.pageY - $(".center").offset().top-$(".glass").height()/2
            //最小限制
            x<0?(x=0):x
            y<0?(y=0):y
            //最大限制
            x>$(".center").width()-$(".glass").width()?   x=$(".center").width()-$(".glass").width():x
            y>$(".center").height()-$(".glass").height()?y=$(".center").height()-$(".glass").height():y
    
            $(".glass").css({
                left:x+'px',
                top:y+'px'
            })
            //扩大比例
            var bx = $(".right img").width() / $(".center img").width()
            var by = $(".right img").height() / $(".center img").height()
            //实现放大后的图片
            $(".right").scrollLeft(x*bx)
            $(".right").scrollTop(y*by)
        })

总结

以上就是放大器案例，具体的放大器样式我们可以再优化下，让其看起来更像一个放大器。只要掌握了思路，剩下就是自由发挥时间啦。