用js代码编写放大镜效果

最新推荐文章于 2024-08-19 15:50:15 发布

qq_57608994

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量147

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_57608994/article/details/127118864

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何通过JavaScript和CSS实现网页中鼠标悬停小图显示黄色遮挡层及大图预览的功能。通过监听鼠标事件，计算鼠标坐标并调整遮挡层位置，同时实现大图按比例平移，为用户提供顺畅的交互体验。

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

废话不多说解释都在代码里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 400px;
        height: 400px;
        position: relative;
        border: 1px solid black;
      }
      #zd {
        width: 250px;
        height: 250px;
        background-color: #fede4f;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
      }
      #big {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        position: absolute;
        top: 0;
        left: 410px;
        overflow: hidden;
        display: none;
      }
      #bigImg {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <img src="../images/leftimg.jpg" alt="" width="400px" height="400px" />
      <div id="zd"></div>
      <div id="big">
        <img src="../images/rimg.jpg" alt="" id="bigImg" />
      </div>
    </div>
    <script>
      //整个案例分为三个功能模块
      // 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
      window.addEventListener("load", function () {
        var box1 = document.getElementById("box1");
        var zd = document.getElementById("zd");
        var big = document.getElementById("big");
        box1.addEventListener("mouseover", function () {
          zd.style.display = "block";
          big.style.display = "block";
        });
        box1.addEventListener("mouseout", function () {
          zd.style.display = "none";
          big.style.display = "none";
        });
      });
      // 黄色的遮挡层跟随鼠标功能
      // 把鼠标坐标直接给遮挡层是不合适的，因为遮挡层所移动的位置是以父盒子为准的
      // 所以我们要先获得鼠标在盒子，之后把数值给遮挡层作为left和top值。
      // 此时用到鼠标移动事件，单是还是在小图片盒子内移动
      box1.addEventListener("mousemove", function (e) {
        // 先算出鼠标在小图片盒子内的坐标
        var x = e.pageX - box1.offsetLeft;
        var y = e.pageY - box1.offsetTop;
        // console.log(x, y);
        // 黄色遮挡层的高度为300 的一半为150，但是如果以后我们需要改动黄色遮挡层的高度，所以我们可以用表达式来表示黄色遮挡层的宽和高（zd.offsetWidth(这是黄色遮挡层的宽)/2和zd.offsetHeight(这是黄色遮挡层的高)/2）
        // 黄色遮挡层跟随鼠标移动的位置，并保证鼠标出现在黄色遮挡层中心部分
        // 遮挡层移动距离zdX和zdY
        zdX = x - zd.offsetWidth / 2;
        zdY = y - zd.offsetHeight / 2;
        // 确定遮挡层移动区域，只能在小图片盒子里面移动
        // 思路：如果zdX坐标小于零，就让遮挡层停在0的位置
        // box1.offsetWidth和box1.offsetHeight为小图片盒子的宽度和高度
        // zd.offsetWidth和zd.offsetHeight为遮挡层的宽度和高度
        // 遮挡层最大移动距离 mzdX和mzdY
        mzdX = box1.offsetWidth - zd.offsetWidth;
        mzdY = box1.offsetHeight - zd.offsetHeight;
        // if语句判断黄色遮挡层的移动距离
        // if (zdX <= 0) {
        //   zdX = 0;
        // } else if (zdX >= mzdX) {
        //   zdX = mzdX;
        // }
        // if (zdY <= 0) {
        //   zdY = 0;
        // } else if (zdY >= mzdY) {
        //   zdY = mzdY;
        // }
        // 用三元表达式表达
        zdX <= 0 ? (zdX = 0) : zdX >= mzdX ? (zdX = mzdX) : false;
        zdY <= 0 ? (zdY = 0) : zdY >= mzdY ? (zdY = mzdY) : false;
        // 黄色遮挡层跟随鼠标移动;
        zd.style.left = zdX + "px";
        zd.style.top = zdY + "px";
        // 移动黄色遮挡层，大图片跟随移动功能
        // 要保证大图片有随着黄色遮挡层移动的效果，就要保证黄色遮挡层和大图片按比例移动
        // 计算公式为：遮挡层移动距离/遮挡层最大移动距离=大图片移动距离/大图片最大移动距离
        // 所以  大图片移动距离 =遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
        var bigImg = document.getElementById("bigImg");
        // 大图片最大移动距离BigX和BigY
        BigX = bigImg.offsetWidth - big.offsetWidth;
        BigY = bigImg.offsetHeight - big.offsetHeight;
        // 遮挡层移动距离zdX和zdY
        // 遮挡层最大移动距离 mzdX和mzdY
        // 大图片跟随遮挡层移动的距离为mBigX和mBigY
        mBigX = (zdX * BigX) / mzdX;
        mBigY = (zdY * BigY) / mzdY;
        bigImg.style.left = -mBigX + "px";
        bigImg.style.top = -mBigY + "px";
      });
    </script>
  </body>
</html>