js实现放大镜（详细注释）

最新推荐文章于 2023-03-19 16:40:41 发布

H-rosy

最新推荐文章于 2023-03-19 16:40:41 发布

阅读量2.6k

点赞数 5

分类专栏：有趣的css和JavaScript 文章标签： javascript html 前端 js vue

本文链接：https://blog.csdn.net/qq_51580852/article/details/126815696

版权

有趣的css和JavaScript 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

本文详细讲解了如何使用Vue.js结合CSS和JavaScript创建一个图片放大镜效果，涉及hover技巧、CSS布局、鼠标事件处理和元素定位。通过实例展示了如何控制遮罩层与图片的显示与移动，适合前端开发者学习定位和响应式设计。

摘要由CSDN通过智能技术生成

大致步骤：

hover的小知识点：

offsetX：鼠标坐标到元素的左侧的距离

offsetWidth：除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

offsetHeight:元素的像素高度包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

实现效果：

完整HTML代码：

完整VUE代码：

大致步骤：

首先我们应该先构思好布局：

先有一个div存放原始图片
再有一个div存放放大后的图片
来一个遮罩层让用户知道自己正在观察哪个区域，并且实现遮罩层跟随鼠标移动而移动
显示放大后的图片

OK，大致就是这几个步骤。

这里在说一下关于代码中的css布局最后三行，在这里我踩了很大一个坑，因为在页面结构中big类是event的邻居兄弟类，而mask类也是兄弟类但是不邻接。并且这两个类的display我最初设置的是none，就是最初没有结构不显示。在我写代码时我使用.event:hover .big,.mask{display:block}发现一直没有效果，并且我开始并没有发现是这里错了，导致纠结了很久。

 .event1:hover + .big ,
   .event1:hover ~ .mask {
    display: block;
   }

hover的小知识点：

hover后面一般都是控制子元素，无法控制父元素的效果
hover更改同级（兄弟）元素属性：
更改兄弟元素又分两种情况：

需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素，在hover后面使用‘+’号链接就行，就是 .event1:hover + .big
需要改变的兄弟元素不是当前元素的邻接元素： .event1:hover ~ .mask

offsetX：鼠标坐标到元素的左侧的距离

offsetWidth：除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

offsetHeight:元素的像素高度包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

url图片地址改成自己的啊，不要和我一样！！！！！

实现效果：

图片本身就比较糊，不是放大的原因

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
   
    <title>放大镜实现</title>
    
  </head>
  <body>
    <div class="spec-preview">
      <img src="./111jpg.jpg" />
      <div class="event1" id="event1" onmousemove="mouseMove(event)"></div>
      <div class="big">
        <img src="./111jpg.jpg"  id="bigImg"/>
      </div>
      <div class="mask"></div>
    </div>
  </body>
  <style>
    .spec-preview {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
    }
    .spec-preview>img {
      width: 100%;
      height: 100%;
    }

     .event1 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
    }
    .mask {
      width: 50%;
      height: 50%;
      background-color: rgba(0, 255, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .big {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -1px;
      left: 105%;
      border: 1px solid rgb(212, 11, 11);
      /* //把下面这行代码去掉，试着理解为什么上面需要乘以-2 */
      overflow: hidden;
      z-index: 998;
      display: none;
      background: white;
    }
    .big img {
      /* 这里的宽高实现放大两倍的效果 */
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
   .event1:hover + .big ,
   .event1:hover ~ .mask {
    display: block;
   }
 
  </style>
  <script>
  // var event1=document.getElementById('event1')
  // console.log(event1)
  var big=document.getElementById('bigImg')
  //获取遮罩层dom实现遮罩层跟随鼠标位置移动
  var mask = document.querySelector('.mask');
  function mouseMove(event){
    // console.log(big.style)
        //offsetX：鼠标坐标到元素的左侧的距离
      //offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和
      let left = event.offsetX - mask.offsetWidth / 2;
      //offsetY：鼠标坐标到元素的顶部的距离
      //offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
      let top = event.offsetY - mask.offsetHeight / 2;
      //  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的
        //超出图片左侧
      if (left <= 0) left = 0;
      //超出图片右侧
      if (left >= mask.offsetWidth) left = mask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= mask.offsetHeight) top = mask.offsetHeight;
      //  修改元素的left|top属性值
      //遮罩层
      mask.style.left = left + "px";
      mask.style.top = top + "px";
      //放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的
        //与css中width：200%，height：200%相对应，建议以后放大倍数为2n
      big.style.left = -2*left + "px";
      big.style.top =  -2*top + "px";
  }
   
  </script>
</html>

认识到一个元素能够跟随鼠标移动而移动那么肯定是使用了定位，这是必须得知道的

完整VUE代码：

:src的意思是动态绑定一个图片资源地址

<template>
  <div class="spec-preview">
    <img :src="imgObj.imgUrl" />
    <div class="event" @mousemove="handler"></div>
    <div class="big">
      <img :src="imgObj.imgUrl" ref="big" />
    </div>
    <div class="mask" ref="mask"></div>
  </div>
</template>

<script>

export default {
 methods:{
    handler(event){
     let big=this.$refs.big
     //获取遮罩层dom实现遮罩层跟随鼠标位置移动
     let mask=this.$refs.mask;
     //offsetX：鼠标坐标到元素的左侧的距离
     //offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和
     let left=event.offsetX-mask.offsetWidth/2;
     //offsetY：鼠标坐标到元素的顶部的距离
     //offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
     let top=event.offsetY-mask.offsetHeight/2;
    //  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的
    if(left<=0)left=0;
    if(left>=mask.offsetWidth)left=mask.offsetWidth;
    if(top<=0)top=0;
    if(top>=mask.offsetHeight)top=mask.offsetHeight
    //  修改元素的left|top属性值
    //遮罩层
    mask.style.left=left+'px';
    mask.style.top=top+'px'
    //放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的
    big.style.left=-2*left+'px'
    big.style.top=-2*top+'px'
    }
    }
}

</script>

放大镜就分享到这里，如有问题，欢迎指出~~~~~~如果对你有帮助欢迎点赞收藏一波哟