English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Aujourd'hui, je veux partager avec vous un effet de loupe d'image que j'ai écrit avec JavaScript. J'ai réalisé deux effets d'agrandissement, mais en réalité, leurs principes sont assez similaires. Ils utilisent deux images pour définir des dimensions correspondantes pour les deux images, puis affichent ces images à des emplacements différents pour obtenir finalement l'effet d'agrandissement.
L'une des méthodes est de m'inspirer de l'effet de loupe d'une page de shopping Taobao. Lorsque le curseur de la souris est déplacé sur l'image du produit, une zone rectangulaire apparaît sur l'image, et cette zone est l'endroit que vous souhaitez agrandir. Ensuite, une image agrandie du produit apparaît à droite de l'image du produit. Ce mode d'agrandissement nécessite uniquement de calculer le ratio d'agrandissement et de modifier les valeurs de scrollLeft et scrollTop de la zone d'agrandissement pour obtenir l'effet d'agrandissement correspondant.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大器</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/* 可视区域的父级标签 */
.wrap{
width: 400px;
height:auto;
border: 1px solid black;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.wrap>img{
width: 100%;
height: auto;
}
/* 锁定放大的矩形区域 */
.box{
border: 1px solid black;
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
opacity: 0.8;
position: absolute;
cursor: pointer;
display: none;
}
/* 要显示放大图片的父级 */
.main{
width: 700px;
height: 700px;
margin;-left:; 420px;
overflow: hidden;
display:none;
position: absolute;
top: 0;
}
.main>img{
width:2800px;
height:auto;
}
</style>
</head>
<body>
<div class="wrap">
<img src="dog.jpg" alt="" />
<div class="box"></div>
</div>
<div class="main">
<img src="dog.jpg"alt="" />
</div>
<script type="text/javascript">
//Obtenir quatre objets
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Ajouter un événement de déplacement
wrap.onmousemove=function(){
//Apparaître après le déplacement de la souris sur l'image visible: la zone de mise à l'échelle verrouillée et l'image agrandie
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//obtenir le décalage de la souris par rapport aux bords de la zone visible
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//la plus grande plage de déplacement possible de la zone rectangulaire
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
// Juger de sorte que la zone rectangulaire de mise à l'échelle verrouillée ne sorte pas de la boîte
if (disx<=0) {
disx=0;
}
if (disy<=0) {
disy=0;
}
if(disx>=distanceMaxX) {
disx=distanceMaxX;
}
if(disy>=distanceMaxY) {
disy=distanceMaxY;
}
box.style.left=disx+'px';
box.style.top=disy+'px';
//Obtenir le rapport d'agrandissement
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//Ajouter un événement de sortie
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>
Aperçu des effets :
La deuxième méthode consiste à agrandir directement l'image originale, comme un miroir de grossissement, c'est une extension de la première méthode, les méthodes précédentes n'ont pas de différence, mais il n'est pas nécessaire de lui placer une zone visible en dernier lieu, affichez directement l'image agrandie dans la zone d'agrandissement d'origine, lorsque vous modifiez les valeurs left et top de la zone d'agrandissement, modifiez également automatiquement les valeurs left et top de l'image correspondante, pour réaliser un effet d'agrandissement synchronisé
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Magnifying Glass</title>
<style type="text/css">
.main{
width: 500px;
height: 570px;
border: 2px solid black;
position: relative;
/*overflow: hidden;*/
}
#img1{
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 200px;
border-radius: 200px;
/*border: 1px solid black;*/
display: none;
position: absolute;
overflow: hidden;
cursor:move;
}
//agrandir l'image, donner une position absolu pour que le déplacement puisse suivre
realiser une synchronisation avec la zone verrouillée
#img2{
width: 1200px;
height: 1400px;
position: absolute;
/*left: 0;
top: 0;*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="main">
<img id="img1" src="dog.jpg"/>
<div class="box">
<img id="img2" src="dog.jpg"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var main=document.querySelector('.main');
var box=document.querySelector('.box');
var boximg=document.querySelector('#img2');
//ajouter un événement de déplacement de la souris
main.addEventListener('mousemove',move,false);
function move(){
//afficher la zone circulaire agrandie
box.style.display='block';
var event=window.event||event;
//obtenir le décalage de la souris par rapport aux bords de la zone visible
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
var dismax=main.offsetWidth-box.offsetWidth;
var dismay=main.offsetHeight-box.offsetHeight;
//la plus grande plage de déplacement possible de la zone rectangulaire
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//Lorsque vous déplacez, modifiez les valeurs left et top de la zone circulaire
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
//De même, lorsque vous déplacez, l'image agrandie doit également modifier les valeurs left et top
boximg.style.left=-event.clientX*2+'px';
boximg.style.top=-event.clientY*2+'px';
// box.scrollLeft=(boximg.offsetWidth-box.offsetWidth);
// box.scrollTop=(boximg.offsetHeight-box.offsetHeight);
}
// Ajouter un événement de souris sortant
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>
Aperçu des effets :
Conclusion : comme vous l'avez vu, les deux méthodes d'agrandissement n'ont pas vraiment de différence, d'abord vous devez obtenir la zone à agrandir, c'est-à-dire le rectangle et le cercle de la zone de verrouillage de l'agrandissement mentionnés précédemment. Ensuite, affichez une zone de l'image à agrandir. J'espère que ces deux morceaux de code vous seront utiles, merci !!