原生js实现简单的放大镜效果

chanjarster 发布于2019-08-22 15:44 / 2093人阅读

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。

前言：
相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；

（1）首先了解一下放大镜效果的html架构：如下图，它由两部分组成。

html：

第一部分的原理是：设置box的background为需要放大的图片，同时背景的宽高为100%。再将box的宽高设为300px，这样背景图片就可以撑满box了。然后通过监听box的mousemove事件，控制红色小框块的移动。这个红色小框块就是要放大的地方。

第二部分的原理是：设置big里面的img为box的宽度的3倍（这里的3倍就是放大镜的放大倍数，当然这个值是可以自由选择的。）。同时big块的宽高为350px，用来限制img的显示。然后通过移动img的left，top来达到放大镜的效果。

  css代码：
  html,body {
    margin: 0;
    padding:0;
  }
  #box{
    width: 300px;
    height: 300px;
    position: relative;
    background: url(12.png);
    background-size:100% 100%;
  }
  #box #small{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.6;
  }
  #big{
    width: 350px;
    height: 350px;
    overflow: hidden;
    position: relative;
    display: none;
  }
  #big img{
    width: 900px;  
    height: 900px;  
    position: absolute;
  }

（2）js部分：

var box = document.querySelector("#box");
var small = document.querySelector("#small");
var big = document.querySelector("#big");
var img = document.querySelector("#imgs");
//监听box的mousemove事件
box.onmousemove = function(e){
  //获取鼠标的x、y坐标。为什么要减去50呢？为了让鼠标刚好在small红色小方块的中心。
  var top = e.clientY-50;
  var left = e.clientX-50;
  //限制small小方块移出box的范围
  if(top > 200){top = 200};
  if(top < 0){top = 0};
  if(left > 200){left = 200};
  if(left < 0){left = 0};
  //动态设置small小方块的位置，让小方块跟随鼠标移动
  small.style.left = left + "px";
  small.style.top = top + "px";
  //让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以（-3）呢？因为big里面的大图是box的3倍。鼠标在box上面向右移动1px，那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
  img.style.top = top*(-3) + "px";
  img.style.left = left*(-3) + "px";
}
//监听box的onmouseenter事件
box.onmouseenter = function(e){
  //当鼠标进入box范围的时候，显示放大效果
  big.style.display="block";
}
//监听box的onmouseleave 事件
box.onmouseleave = function(e){
  //当鼠标移出box范围的时候，隐藏放大效果
  big.style.display="none";
}

好了，css+js实现放大镜的功能到这里就完成了。很简单吧。不过这只是简单的实现，还有使用canvas实现的方法。

不能只看不动手的喔，自己动手敲一遍，就好理解很多了。

GPU云服务器云服务器原生js实现放大镜 js实现放大镜效果 js里面的放大镜效果实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93701.html

原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

lushan 2019-08-02 16:01 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

megatron 2019-08-30 14:16 评论0 收藏0
原生js实现图片放大镜效果

摘要：放大镜原理放大镜的实现过程是将一个小图放置在一个盒子里。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。右侧大图盒子中放置的是一张大的图片，然后盒子设置成溢出隐藏。放大镜原理放大镜的实现过程是将一个小图放置在一个盒子里。宽高都是100%。当鼠标在小图盒子里移动时，出现一个移动块(阴影区域)。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。如图(请勿...

CoXie 2019-08-20 18:20 评论0 收藏0
仿淘宝的放大镜效果

摘要：本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单，下面我们学习一下淘宝放大镜效果是如何实现的。前言这一段时间事情挺多的，一直没有时间写文章。这两天稍微闲了一些，就趁这会闲工夫写一篇文章。本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂...

wuyangnju 2019-08-20 18:14 评论0 收藏0