我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

1.背景:

从箱底找出来的项目，熟悉一下码上掘金的部署，整个项目主要由三部分组成,第一个是选择图片框,即四个图片整列，点击会改变选中的图片，然后就是图片展示窗,展示选中的图片，第三部分是放大器内容窗，放大镜移动时窗内显示图片随鼠标改变,整个实现该过程还是十分有趣的,虽然比较简单,实际涉及的技术也不是很复杂,但是还是get到了码上掘金这个插件的方便之处。 项目链接:

2.html布局样式:

 <div class="left">
            <div class="top showBox"><!--显示窗口-->
                <img src="https://s1.ax1x.com/2022/09/07/vHG5lT.jpg" alt="" class="showImg">
                <div class="mask"></div>
            </div>
            <ul class="clearfix"><!--图片选择窗口-->
                <li class="active"><img src="https://s1.ax1x.com/2022/09/07/vHG5lT.jpg" alt=""></li>
                <li><img src="https://s1.ax1x.com/2022/09/07/vHGff0.jpg" alt=""></li>
                <li><img src="https://s1.ax1x.com/2022/09/07/vHG4pV.jpg" alt=""></li>
                <li><img src="https://s1.ax1x.com/2022/09/07/vHGoXF.jpg" alt=""></li>
            </ul>
        </div>
        <div class="right bigGlass"><!--放大镜内容窗口-->
            <img src="https://s1.ax1x.com/2022/09/07/vHG5lT.jpg" alt="" class="bigGlassImg">
        </div>

3.js事件设置

主要内容是：

• 设置放大器比例，及其显示图片大小
• 设置点击事件
• 设置放大器跟随鼠标移动事件

// 切换图片
    changePic() {
        for (let i = 0; i < this.ulLiEle.length; i++) {
            let _this = this
            this.ulLiEle[i].onclick = function () {
                _this.removeStyle()
                this.classList.add('active')
                _this.showImg.src = _this.imageUrl[i]
                _this.bigGlassImg.src = _this.imageUrl[i]
            }
        }
    }

  
//计算背景图比例
   遮罩层mask            放大镜bigGlass
 ---------------   =   ------------------
  显示图片showbox        背景图bigPicBox
  
      背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
   
     
    
  遮罩层移动距离        遮罩层
  ------------   =  ------------
  背景图片移动距离      放大镜

  背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
         

4. 利用图床上传图片

码上掘金是不自带图床功能的,为了让组件效果更好,我把本地的图片借用图床生成了url地址,以供使用

5.实现截图