js详细讲解放大镜效果的实现

实现放大镜的整体思路

复制代码
1.当鼠标放在图片上的时候,出现蒙层。
2.出现蒙层,让鼠标在蒙层中心
3.限制蒙层移动的范围
4.放大镜移动

最终实现的效果

复制代码
鼠标放上去的时候,出现一个蒙层。
蒙层的移动范围只能在图片里,不能超出范围。
移动蒙层时,右侧会出现图片的放大部分。
移除图片的范围,放大镜消失。

鼠标放上去时候出现蒙层

xml 复制代码
<style>
  *{
    padding: 0;
    margin: 0;
  }
  .box{
    margin-left: 400px;
    margin-top: 150px;
    position: relative;
  }
  .small-box{
    position: absolute;
    /* 图片的大小 */
    height: 450px;
    width: 450px;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 300px;
    height: 300px;
    z-index: 3;
    border: 1px solid #aaa;
    background: 50% top no-repeat #fede4f;
    opacity: .5;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    filter: alpha(Opacity=50);
    cursor: move;
  }
  .big-box{
    position: relative;
    display: none;
    /* 右侧放大镜盒子的大小 */
    width: 500px;
    height: 500px;
    /* 盒子肯定比图片小,然后使用超出裁剪 */
    overflow: hidden;
    /* 定位右侧盒子的位置 */
    top: 0px;
    /* 留了一个单位的像素处来,好区别 */
    left:451px;
  }
  #bigImg{
    position: absolute;
  }
  .small-box:hover .mask{
    display: block;
  }
  .small-box:hover + .big-box{
    display: block;
  }
</style>
xml 复制代码
<body>
   <div id="box" class="box">
    <!-- 页面上看见的小图 -->
    <div id="smallBox" class="small-box">
      <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
        <div class="mask" id="mask"></div>
      </div>
    </div>
    <!-- 放大的图 -->
    <div class="big-box" id="bigBox">
      <img id="bigImg" src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
    </div>
   </div>
</body>

计算蒙层坐标的中心位置

ini 复制代码
1.我们首先要计算一个坐标点的位置。
获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
现在我们得到了坐标点的位置。


如何计算蒙层坐标的中心位置呢?
mask_x= mask_x-mask.offsetWidth/2
mask_y= mask_y-mask.offsetHeight/2
也就是将 mask_x 向左移动了mask元素宽度的一半。

特别说明:
offsetLeft 是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
margin,定位,border也会影响offsetLeft的值。但是padding不会影响。
xml 复制代码
<body>
   <div id="box" class="box">
    <!-- 页面上看见的小图 -->
    <div id="smallBox" class="small-box">
      <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
      <div class="mask" id="mask"></div>
    </div>
    <!-- 放大的图 -->
    <div class="big-box" id="bigBox">
      <img src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
    </div>
   </div>
</body>
ini 复制代码
<script>
  let smallBox=document.getElementById('smallBox')
  let box=document.getElementById('box')
  let mask=document.getElementById('mask')

  smallBox.onmousemove =function(e){
    // 获取蒙层坐标点的位置
    let mask_x= e.pageX - box.offsetLeft
    let mask_y= e.pageY - box.offsetTop
    // 计算蒙层坐标点的中心位置
    mask_x-= mask.offsetWidth/2
    mask_y-= mask.offsetHeight/2 
    mask.style.left = mask_x+'px'
    mask.style.top = mask_y+'px'
  }
</script>

限制移动的范围

复制代码
在移动蒙层的的时候,是有范围限制的。
X轴最大的范围是: smallBox.offsetWidth-mask.offsetWidth,最小范围是0;
Y轴的最大范围是: smallBox.offsetHeight-mask.offsetHeight,最小范围是0;
ini 复制代码
<script>
  let smallBox=document.getElementById('smallBox')
  let box=document.getElementById('box')
  let mask=document.getElementById('mask')

  smallBox.onmousemove =function(e){
    // 获取蒙层坐标点的位置
    let mask_x= e.pageX - box.offsetLeft
    let mask_y= e.pageY - box.offsetTop
    // 计算蒙层坐标点的中心位置
    mask_x-= mask.offsetWidth/2
    // mask_x-= mask.offsetWidth - mask_x /2
    mask_y-= mask.offsetHeight/2 


    // 获取X可以移动的最大值
    let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
    // 获取y可以移动的最大值
    let moveMaxY= smallBox.offsetHeight-mask.offsetHeight

    // X轴最小值和最大值
    if(mask_x<0){
      mask_x=0
    }
    if(mask_x>moveMaxX){
      mask_x=moveMaxX
    }
    // Y轴最小值和最大值
    if(mask_y<0){
      mask_y=0
    }
    if(mask_y>moveMaxY){
      mask_y=moveMaxY
    }
    
    mask.style.left = mask_x+'px'
    mask.style.top = mask_y+'px'
  }
</script>

大图的移动

ini 复制代码
当我们的蒙层向右移动的时候,
我们的大图实际上是向左移动的。
移动的公式:
bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
ini 复制代码
<script>
let smallBox=document.getElementById('smallBox')
let box=document.getElementById('box')
let mask=document.getElementById('mask')
let bigBox = document.getElementById('bigBox')

smallBox.onmousemove =function(e){
  // 获取蒙层坐标点的位置
  let mask_x= e.pageX - box.offsetLeft
  let mask_y= e.pageY - box.offsetTop
  // 计算蒙层坐标点的中心位置
  mask_x-= mask.offsetWidth/2
  mask_y-= mask.offsetHeight/2

  // 获取X可以移动的最大值
  let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
  // 获取y可以移动的最大值
  let moveMaxY= smallBox.offsetHeight-mask.offsetHeight

  // X轴最小值和最大值
  if(mask_x<0){
    mask_x=0
  }
  if(mask_x>moveMaxX){
    mask_x=moveMaxX
  }
  // Y轴最小值和最大值
  if(mask_y<0){
    mask_y=0
  }
  if(mask_y>moveMaxY){
    mask_y=moveMaxY
  }
  
  mask.style.left = mask_x+'px'
  mask.style.top = mask_y+'px'

  // 右侧的放大图
  bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
  bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
}
</script>
相关推荐
天天扭码8 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴10 分钟前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真11 分钟前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
s91236010127 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim1 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码1 小时前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言1 小时前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K1 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_1 小时前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang2 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构