网页中的放大镜

最新推荐文章于 2024-07-12 21:49:18 发布

霞娶

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量826

点赞数

文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/m0_65014101/article/details/126646574

版权

在网页中，经常能看到一些图片可以放大观看，其实那只是给人们的一种错觉，其本质为：给观看者一张缩小后的图片，然后再展示一张正常大小的图片，就会给人一种放大的感觉。

能看到这里的朋友应该对前端已经有所了解，我就直接用内联式写作，下面直接是一个简单的网页放大镜：

//内联式css

  <style>
    * {
      margin: 0;
      padding: 0;
    }//清除网页的外边距和内边距

    body {
      height: 1000px;
    }//给网页设置一个比较大的值，使得网页更加的方便观看

    .goods {
      width: 450px;
      height: 250px;
      margin: 2000px 0 0 100px;
      background-color: #f1f1f1;
      position: relative;
    }

    .mask {
      display: none;
      width: 20px;
      height: 20px;
      cursor: move;
      background: url() repeat;//添加一个小一点的区域层
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
    }

    .show-img {
      width: 100%;
    }

    .goods-big {
      display: none;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 470px;
      z-index: 9;
    }

    .big-img {
      position: absolute;
    }
  </style>




//网页显示部分
<body>
  <div class="goods">
    <div class="goods-show">
      <img class="show-img" src="" alt="">
//插入一张需要的图片（这张图片会缩小）
      <div class="mask"></div>
    </div>
    <div class="goods-big">
//插入一张和上面一样的图片
      <img class="big-img" height="1000" src="" alt="">
    </div>
  </div>



//内联式js


  <script>
//自定义一个函数用来获取body中的元素
    function $(selector) {
      return document.querySelector(selector);
    }

//自定义一个函数
    function threshold(min, max, val) {
      if (val < min) {
        val = min
      }
      if (val > max) {
        val = max
      }
      return val;
    }


    let _goodsShow = $('.goods-show');
    let _mask = $('.mask');
    let _goodsBig = $('.goods-big');
    let _goods = $('.goods');
    let _bigImg = $('.big-img');
//绑定鼠标移入事件
    _goodsShow.onmouseover = function () {
      _mask.style.display = 'block';
      _goodsBig.style.display = 'block';
    }
//绑定鼠标移出事件
    _goodsShow.onmouseout = function () {
      _mask.style.display = 'none';
      _goodsBig.style.display = 'none';
    }
    _goodsShow.onmousemove = function (event) {
      let _event = event || window.event;
      let _pageX = _event.pageX || _event.clientX + document.documentElement.scrollLeft;
      let _pageY = _event.pageY || _event.clientY + document.documentElement.scrollTop;
      let _boxX = _goods.offsetLeft;
      let _boxY = _goods.offsetTop;
      let _maskWidth = _mask.offsetWidth;
      let _maskHeight = _mask.offsetHeight;
      let _maskX = _pageX - _boxX - _maskWidth / 2;
      let _maskY = _pageY - _boxY - _maskHeight / 2;
      _maskX = threshold(0, _goods.offsetWidth - _maskWidth, _maskX);
      _maskY = threshold(0, _goods.offsetHeight - _maskHeight, _maskY)
      _mask.style.left = _maskX + 'px'
      _mask.style.top = _maskY + 'px'
      let _maskMove = _goodsShow.offsetWidth - _maskWidth
      let _bigImgMove = _bigImg.offsetWidth - _goodsBig.offsetWidth
      let _ratio = _bigImgMove / _maskMove;
      _bigImg.style.left = -_ratio * _maskX + 'px';
      _bigImg.style.top = -_ratio * _maskY + 'px';
    }
  </script>
</body>

</html>

下面是一个大概的效果图，因为图片是本地的就没写上去：