Home > Article > Web Front-end > Native JS implements simple magnifying glass effect

Native JS implements simple magnifying glass effect

高洛峰Original: 2017-02-10 17:37:421803browse

The example of this article shares the specific code for realizing the magnifying glass effect in native JS for your reference. The specific content is as follows

<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  * {
  margin: 0;
  padding: 0;
  }
  img{
  vertical-align: top;
  }
  .fdj {
  width: 350px;
  height: 350px;
  position: relative;
  margin: 100px auto;
  border: 1px solid gainsboro;
  }
  .small {
  position: relative;
  }
  .small img {
  width: 350px;
  }
  .mask {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
  display: none;
  }
  .big {
  position: absolute;
  top: 0;
  left: 360px;
  width: 500px;
  height: 500px;
  border: 1px solid gainsboro;
  overflow: hidden;
  display: none;
  }
  .big img{
  position: absolute;
  left: 0;
  top: 0;
  }
 </style>
 </head>
 
 <body>
 <div class="fdj">
  <div class="small">
  <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
  <div class="mask"></div>
  </div>
  <div class="big">
  <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
  </div>
 </div>
 </body>
 <script type="text/javascript">
 var fdj = document.querySelector(&#39;.fdj&#39;) // 获得最大的盒子
 var small = document.querySelector(&#39;.small&#39;); //获取小图片盒子
 var big = document.querySelector(&#39;.big&#39;); //获取大图片盒子
 var bigs = big.children[0] //大图片 
 var smalls = small.children[0] //小图片
 var mask = small.children[1]; //遮罩
 
 //鼠标移入小图片盒子
 small.onmouseover = function() {
  //鼠标移入图片盒子将遮罩与大图片显示
  mask.style.display = &#39;block&#39;;
  big.style.display = &#39; block&#39;;
 };
 
 //鼠标移出小图片盒子
 small.onmouseout = function() {
  //鼠标移出小图片盒子将遮罩与大图片隐藏
  mask.style.display = &#39;none&#39;;
  big.style.display = &#39;none&#39;;
 };
 
 var x=0;
 var y=0;
 //鼠标在小图片上移动时
 small.onmousemove = function(ev) {
  var ev = event || window.event;
 //让鼠标在遮罩正中
  //鼠标X坐标与Y坐标
  x = ev.clientX -this.offsetParent.offsetLeft- mask.offsetWidth / 2 ; 
  y = ev.clientY -this.offsetParent.offsetTop- mask.offsetHeight / 2 ;
  //将遮罩限制在小图片盒子中
 
  if (x<0) {
  x=0;
  }else if(x>small.offsetWidth-mask.offsetWidth){
  x = small.offsetWidth-mask.offsetWidth;
  }
 
  if(y<0){
  y=0;
  }else if(y>small.offsetHeight-mask.offsetHeight){
  y= small.offsetHeight-mask.offsetHeight
  }
  mask.style.left = x + &#39;px&#39;;
  mask.style.top = y + &#39;px&#39;;
 
  //大图与小图的比例
 
  /*var scalX = bigs.offsetWidth/small.offsetWidth;
  var scalY = bigs.offsetHeight/small.offsetHeight;*/
 
  var scalX = x/(small.offsetWidth-mask.offsetWidth);
  var scalY = y/(small.offsetHeight-mask.offsetHeight);
 
  bigs.style.left = -(x*scalX)+&#39;px&#39;;
  bigs.style.top = -(y*scalY)+&#39;px&#39;;
 
 };
 
 </script>
 
</html>

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that Please support PHP Chinese website.

For more articles related to native JS implementing a simple magnifying glass effect, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Table control supporting Angular 2Next article：Table control supporting Angular 2

See more

Native JS implements simple magnifying glass effect

Related articles