商城图片放大镜

最新推荐文章于 2023-11-07 22:04:45 发布

LeviAckerman_Js

最新推荐文章于 2023-11-07 22:04:45 发布

阅读量784

点赞数

分类专栏： JavaScript HTML 面试文章标签： js html javascript 面试 vue.js

本文链接：https://blog.csdn.net/qq_45279574/article/details/109423346

版权

JavaScript 同时被 3 个专栏收录

42 篇文章 3 订阅

订阅专栏

面试

16 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

直接上主菜，代码注解详细，小白也能懂（一看就会）

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!--<link rel="stylesheet" href="css/index.css">-->
  <style>
    img {
      display: block;
    }
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }
    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      overflow: hidden;
      display: none;
    }
    .big img {
      position: absolute;

    }
    .mask {
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: move;
      display: none;
    }
    .small {
      position: relative;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <div class="small" id="small">
      <img src="../../img/11.jpg" width="350" height="350" alt="" />
      <div class="mask" id="mask"></div>
    </div>
    <div class="big" id="big">
      <img src="../../img/11.jpg" width="800" alt="" id="img" />
    </div>
  </div>
</body>
<script>
  // 1 获取节点
  let boxObj = document.getElementById('box');
  let smallObj = document.getElementById('small');
  let maskObj = document.getElementById('mask');
  let bigObj = document.getElementById('big');
  let bigImg = document.getElementById('img');
  // 2 鼠标移入smallObj显示mask和big
  smallObj.onmouseenter = function () {
    maskObj.style.display = 'block';
    bigObj.style.display = 'block';
  }
  // 3 鼠标移出则隐藏
  smallObj.onmouseleave = function () {
    maskObj.style.display = 'none';
    bigObj.style.display = 'none';
  }
  // 获取box的left和top值
  let boxLeft = boxObj.offsetLeft;
  let boxTop = boxObj.offsetTop;
  // 4 给small绑定鼠标移动事件,让mask动起来
  smallObj.onmousemove = function (eve) {
    // 4-1 获取鼠标的实时位置
    let mouseX = eve.pageX;
    let mouseY = eve.pageY;
    // console.log(mouseX, mouseY);
    // 4-2 计算出mask的位置
    let maskPosX = mouseX - boxLeft - maskObj.offsetWidth / 2;
    let maskPosY = mouseY - boxTop - maskObj.offsetHeight / 2;
    // 4-3 边界的设置
    if (maskPosX < 0) maskPosX = 0;
    if (maskPosY < 0) maskPosY = 0;
    // 最大top和left的设置
    let maskTargetX = smallObj.offsetWidth - maskObj.offsetWidth;
    let maskTargetY = smallObj.offsetHeight - maskObj.offsetHeight;
    if (maskPosX > maskTargetX) maskPosX = maskTargetX;
    if (maskPosY > maskTargetY) maskPosY = maskTargetY;
    // 4-4 设置mask(小黄块的位置)
    maskObj.style.left = maskPosX + 'px';
    maskObj.style.top = maskPosY + 'px';
    // 4-5 设置打图的位置跟随小黄块动
    //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
    //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
    //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
    // 4-5-1 计算打图的最大边界值
    let imgTargeX = bigImg.offsetWidth - bigObj.offsetWidth;
    let imgTargeY = bigImg.offsetHeight - bigObj.offsetHeight;
    // 计算大图根据鼠标移动的位置
    let tmpImgPosX = maskPosX / maskTargetX * imgTargeX;
    let tmpImgPosY = maskPosY / maskTargetY * imgTargeY;
    // 大图移动方向和滑块相反,所以给负值
    bigImg.style.left = -tmpImgPosX + 'px';
    bigImg.style.top = -tmpImgPosY + 'px';
  }
</script>
</html>

LeviAckerman_Js

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商城图片放大镜

直接上主菜，代码注解详细，小白也能懂（一看就会）<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>  <style> img { display: bloc
复制链接

扫一扫