Native JS implémente un simple effet de loupe-js tutoriel-php.cn

Native JS implémente un simple effet de loupe

高洛峰

Libérer： 2017-02-10 17:37:42

original

1841 Les gens l'ont consulté

L'exemple dans cet article partage le code spécifique pour réaliser l'effet loupe en JS natif pour votre référence. Le contenu spécifique est le suivant

<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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela sera utile à votre étude. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés au JS natif implémentant un simple effet de loupe, veuillez faire attention au site Web PHP chinois !