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:471560parcourir
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('filter');
var smallImg = document.getElementById('smallImg');
var bigImg = document.getElementById('bigImg');
var wrap = document.getElementById('wrap');
var largeImgs = bigImg.getElementsByTagName('img')[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!