js 实现图片放大镜

因实现了一个图片放大镜效果的小功能,觉得有意思,所以把制作想法和最终代码分享出来。

先说一下制作想法
没想到的是这个小功能难点还是挺多的,如果没找对思路做起来还是挺费劲的。

例如一开始,最困扰我的一点是如何只放大并显示图片的一部分,隐藏其余部分。如果按照错误的思路来,比如使用遮罩层隐藏图片的其他区域然后某一区域不隐藏,你会发现很难实现,因为从css逻辑上好像实现不了这样的操作——例如我只显示图片中某个圆形区域。因为好像并不能实现遮住一部分显示一部分。如果用canvas绘制,那更是麻烦。其实最正确的办法是使用背景图片来实现该功能。

另一点,当图片元素监听鼠标移动事件(mousemove)的时候,会因为放大区域挡在了你的鼠标位置,而无法触发监听事件。如果想错思路例如想通过拦截冒泡事件来处理,会发现处理起来很困难也麻烦。最后发现只要在css加上pointer-events: none;即可解决该问题。

最后一点,就是鼠标移动事件(mousemove)的触发时间有时候有间隙,导致放大元素跟随鼠标移动的时候会不流畅,会有卡顿感。然后发现使用计时器及时更近坐标位置即可解决这个问题。

总之,通过制作这个小功能学习了不少知识。温故而知新还是非常重要的。

以下为实现代码 (可直接运行)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大镜</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.container{
  text-align: center;
}

.zoom-wrap{
  position: relative;
  display: inline-block;
}

.target{
  position: relative;
  width: 100%;
}

.zoom-area{
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,.3);
  background-repeat: no-repeat;
  pointer-events: none;

  transition: .3s ease-out;
}
</style>
</head>
<body>
  <div class="container">
    <div class="zoom-wrap">
      <!-- 只需修改该处的图片路径即可放大对应图片 -->
      <img class="target" src="https://s1.ax1x.com/2021/12/09/oWHiJ1.jpg">
      <div class="zoom-area"></div>
    </div>
  </div>

  <script type="text/javascript">
    //放大倍数
    var scale = 10;
    var showZoomArea = false;

    //等待放大的图片
    var target = document.getElementsByClassName('target')[0];
    target.addEventListener('mousemove', zoomImgMouseMove, false);
    target.addEventListener('mouseenter', zoomImgMouseEnter, false);
    target.addEventListener('mouseleave', zoomImgMouseleave, false);

    //放大显示区域
    var zoomArea = document.getElementsByClassName('zoom-area')[0];
    //设置放大背景图
    zoomArea.style.backgroundImage = 'url('+target.getAttribute('src')+')';

    //等待图片加载完成
    target.onload = function(){
      var targetRect = target.getBoundingClientRect();
      var targetWidth = targetRect.width;
      var targetHeight = targetRect.height;

      //设置放大区域样式
      zoomArea.style.backgroundSize = (targetWidth * scale)+'px '+(targetHeight * scale)+'px';
    }

    var zoomRect = zoomArea.getBoundingClientRect();
    var widthHalf = zoomRect.width / 2;
    var heightHalf = zoomRect.height / 2;
    var offsetX = 0;
    var offsetY = 0;

    console.log(window.innerWidth, window.innerHeight);

    function zoomImgMouseMove(e){
      offsetX = e.offsetX;
      offsetY = e.offsetY;
    }

    function zoomImgMouseEnter(){
      showZoomArea = true;
    }

    function zoomImgMouseleave(){
      showZoomArea = false;
    }

    setInterval(function(){
      zoomArea.style.backgroundPosition = -(offsetX * scale - widthHalf)+'px '+(-(offsetY * scale - heightHalf))+'px';
      window.innerWidth, window.innerHeight

      //放大镜居中
      /*zoomArea.style.left = (offsetX - widthHalf) + 'px';
      zoomArea.style.top = (offsetY - heightHalf) + 'px';*/

      //放大镜居右下角
      if((offsetX + zoomRect.width) > window.innerWidth){
        zoomArea.style.left = (offsetX - zoomRect.width) + 'px';
      }else{
        zoomArea.style.left = offsetX + 'px';
      }

      if((offsetY + zoomRect.height) > window.innerHeight){
        zoomArea.style.top = (offsetY - zoomRect.height) + 'px';
      }else{
        zoomArea.style.top = offsetY + 'px';
      }

      setZoomAreaVisi();
    }, 100)

    function setZoomAreaVisi(){
      if(showZoomArea)
        zoomArea.style.transform = 'scale(1)';
      else
        zoomArea.style.transform = 'scale(0)';
    }

    setZoomAreaVisi();
  </script>
</body>
</html>

最终展示效果还是很不错的,以清明上河图为例,里面的人物风景均可看的一清二楚。

清明上河图 - 张择端
效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容