Heim > Artikel > Web-Frontend > JavaScript implementiert einfachen Lupeneffektcode

JavaScript implementiert einfachen Lupeneffektcode

小云云Original: 2018-02-09 10:25:173402Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich den einfachen Lupeneffekt vor, der von nativem JavaScript implementiert wird, und umfasst Implementierungstechniken im Zusammenhang mit der JavaScript-Ereignisreaktion und der dynamischen Bedienung von Seitenelementattributen. Ich hoffe, er kann jedem helfen .

Prinzip: Tatsächlich besteht die sogenannte Vergrößerung darin, zwei identische Bilder vorzubereiten, bis auf die unterschiedlichen Größen. Durch Bewegen der Maus an verschiedene Positionen wird der dem Großbild entsprechende Bildinhalt angezeigt.

Vollständiger Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜效果</title>
</head>
<body>
 <p id="wrap" style="position: relative;width: 900px;margin: 0 auto;text-align: center;">
  <p id="smallImg" style="width: 400px;height: 400px; position: relative;z-index: 1;">
   <img src="small.jpg" style="width: 400px;height: 400px;"/>
   <span id="filter" style="width: 200px;height: 200px;background-color: blue;opacity: 0.1;position: absolute;top: 0;left: 0; z-index: 2;cursor: move;display: none;">
   <span>
  </p>
  <p id="bigImg" style="width: 400px;height: 400px;overflow: hidden;position: absolute;right: 0px;top: 0;display: none;">
   <img src="large.jpg" style="width: 800px;height:800px; position: absolute;left: 0;top: 0;">
  </p>
 </p>
 <script type="text/javascript">
  var filter = document.getElementById(&#39;filter&#39;);
  var smallImg = document.getElementById(&#39;smallImg&#39;);
  var bigImg = document.getElementById(&#39;bigImg&#39;);
  var wrap = document.getElementById(&#39;wrap&#39;);
  var largeImgs = bigImg.getElementsByTagName(&#39;img&#39;)[0];
  smallImg.onmouseover = function(){
   bigImg.style.display = "inline-block";
   filter.style.display = "inline-block";
  }
  smallImg.onmousemove = function(event){
   var event = event || window.event;
   var mouseleft = event.clientX - wrap.offsetLeft;
   var mousetop = event.clientY - wrap.offsetTop;
   var left = mouseleft<smallImg.offsetWidth/4?0:mouseleft>smallImg.offsetWidth*3/4?smallImg.offsetWidth/2:(mouseleft - filter.offsetWidth/2);
   var top = mousetop<smallImg.offsetHeight/4?0:mousetop>smallImg.offsetHeight*3/4?smallImg.offsetHeight/2:(mousetop - filter.offsetWidth/2);
   filter.style.left = left + "px";
   filter.style.top = top +"px";
   largeImgs.style.left = "-" +　left*bigImg.offsetWidth/smallImg.offsetWidth + "px";
   largeImgs.style.top = "-" +　top*bigImg.offsetHeight/smallImg.offsetHeight + "px";
  }
  smallImg.onmouseout = function(){
   bigImg.style.display = "none";
   filter.style.display = "none";
  }
 </script>
</body>
</html>

Laufeffekt:

Verwandte Empfehlungen:

Detaillierte Erläuterung der JS-Implementierung eines Bildlupen-Plug-In-Beispiels

Eine einfache Methode zur Implementierung von Lupen mit JQuery

JavaScript Ein Beispiel für die Nachahmung des Lupeneffekts von Taobao

Das obige ist der detaillierte Inhalt vonJavaScript implementiert einfachen Lupeneffektcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery JS 事件

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：Die 10 häufigsten Javascript-FehlerNächster Artikel：Die 10 häufigsten Javascript-Fehler

In Verbindung stehende Artikel

Mehr sehen