Maison > Article > interface Web > Utiliser du JavaScript natif pour obtenir un effet de loupe

Utiliser du JavaScript natif pour obtenir un effet de loupe

亚连original: 2018-06-07 11:56:471596parcourir

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>

Effet de course :

Ce qui précède est ce que j'ai compilé pour vous , j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

À propos de l'utilisation de Material dans Angular2 (tutoriel détaillé)

Comment implémenter une liste Dom Nodelist circulaire en utilisant JS

Comment faire changer la couleur du texte après un clic dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse détaillée du code source de Vue Socket.ioArticle suivant：Analyse détaillée du code source de Vue Socket.io

Articles Liés

Voir plus