Heim > Artikel > Web-Frontend > Native JS implementiert einen einfachen Lupeneffekt

Native JS implementiert einen einfachen Lupeneffekt

高洛峰Original: 2017-02-10 17:37:421797Durchsuche

Das Beispiel in diesem Artikel enthält den spezifischen Code zur Realisierung des Lupeneffekts in nativem JS als Referenz. Der spezifische Inhalt lautet wie folgt

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für Ihr Studium hilfreich sein wird. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zum Thema natives JS, das einen einfachen Lupeneffekt implementiert, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tabellensteuerung, die Angular 2 unterstütztNächster Artikel：Tabellensteuerung, die Angular 2 unterstützt

In Verbindung stehende Artikel

Mehr sehen