放大镜制作原创

深处莫神

发布于 2022-8-11 17:29

浏览

0收藏

放大镜

思路：1.大图小图都放入同样大小的盒子，通过鼠标移动到small小图身上去调整box蓝色盒子的位置。
2.同时让big大图盒子从display=none变成block显示状态。
3.让大图片的位置距离上边和左边的进行移动，此时移动的位置大小是按照大小图的比值*移动位置
4.需要设置避免蓝色box溢出!
放大镜制作-鸿蒙开发者社区

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    #small {
      width: 576px;
      height: 324px;
      position: absolute;
      left: 10px;
      top: 50px;
    }

    #box {
      width: 172px;
      height: 97px;
      background: #87B3D6;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      cursor: crosshair;
    }

    #big {
      width: 576px;
      height: 324px;
      position: absolute;
      left: 620px;
      top: 50px;
      overflow: hidden;
      display: none;
    }
  </style>
</head>

<body>
  <div id="small">
    <!-- 小图 -->
    <img src="./smallimage.jpg" />
    <!-- 盒子 -->
    <div id="box"></div>
  </div>

  <!-- 大图的div -->
  <div id="big">
    <img src="./bigimage.jpg" id="img" style="position: absolute;left:0;top:0;" />
  </div>
</body>

</html>
<script>
  //获取元素
  //元素绑定事件
  //放大图片的效果
  //不要让盒子溢出
  var small = document.getElementById('small')
  var big = document.getElementById('big')
  var box = document.getElementById('box')
  var img = document.getElementById('img')

  //触发一次 onmousemove
  small.onmousemove = function (e) {
    //盒子显示
    box.style.opacity = '0.5'

    // 大图显示
    big.style.display = 'block'


    //放大镜逻辑
    //e.clientX,Y 当前鼠标的坐标点
    //e.offsetLeft offsetTop  margin-left margin-top
    // console.log(e.clientX)
    // console.log(e.clientY)

    // console.log(small.offsetLeft) //margin-left
    // console.log(small.offsetTop) //margin-top

    //赋予一个新的坐标位置
    var x = e.clientX - small.offsetLeft - 86
    var y = e.clientY - small.offsetTop - 48.5


    //判断是否有溢出
    // 水平方向
    if (x <= 0) {
      x = 0
    } else if (x >= 404) {
      // 576(small) - 172(box) = 404
      x = 404
    }

    // 垂直方向
    if (y <= 0) {
      y = 0
    } else if (y >= 227) {
      // 324px - 97px = 227px
      y = 227
    }

    box.style.left = `${x}px`
    box.style.top = `${y}px`

    //大图
    // 小图：576*324
    // 大图：1920*1080
    // 大图/小图(比率关系) 1920/576=3.33(比率关系)
    //代表 小图身上移动1px 大图身上移动3.3px
    // 10/3 = 3.33
    //核心原理 主要就是要知道大图和小图的比率关系
    img.style.left = `-${x * (10 / 3)}px`
    img.style.top = `-${y * (10 / 3)}px`
  }

  small.onmouseleave = function () {
    box.style.opacity = '0'
    big.style.display = 'none'
  }


</script>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

其他

标签

已于2022-8-11 17:33:46修改