Utiliser du JavaScript natif pour obtenir un effet de loupe-js tutoriel-php.cn

Utiliser du JavaScript natif pour obtenir un effet de loupe

亚连

Libérer： 2018-06-07 11:56:47

original

1602 Les gens l'ont consulté

Cet article présente principalement le simple effet de loupe implémenté par JavaScript natif, impliquant des techniques d'implémentation liées à la réponse aux événements javascript et au fonctionnement dynamique des attributs des éléments de page. Les amis dans le besoin peuvent s'y référer

Cet article décrit le. implémentation de JavaScript natif avec exemples d'effet loupe simple. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Principe : En fait, ce qu'on appelle l'agrandissement consiste à préparer deux images identiques, à l'exception des tailles différentes. Déplacer la souris vers différentes positions affichera le contenu de l'image correspondant à la grande image.

Code complet :

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

Copier après la connexion

Effet de course :