Implementazione dell'effetto ingrandimento dell'immagine con codice nativo di js

Oggi vi condividerò un effetto di ingrandimento delle immagini scritto in js da me, ho fatto due tipi di effetti di ingrandimento, in realtà i loro principi sono molto simili, entrambi utilizzano due immagini per stabilire le dimensioni delle due immagini corrispondenti, infine visualizzate in posizioni diverse, realizzando così l'effetto di ingrandimento finale.

Il primo tipo è un effetto lente di ingrandimento imitato dalla pagina di acquisto di Taobao, quando il mouse si muove sull'immagine del prodotto, appare un'area rettangolare sull'immagine, che è l'area da ingrandire, e poi sulla destra dell'immagine del prodotto appare un'immagine del prodotto ingrandita. Questo metodo di ingrandimento richiede solo di calcolare bene la proporzioni di ingrandimento e di modificare i valori di scrollLeft e scrollTop dell'area di ingrandimento per ottenere l'effetto di ingrandimento corrispondente.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ingrosso immagine</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
／＊Il tag genitore dell'area visibile＊／
.wrap{
width: 400px;
height:auto;
border: 1px solid black;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.wrap>img{
width: 100%;
height: auto;
}
／＊Area rettangolare bloccata di ingrandimento＊／
.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;
}
／＊Il genitore che deve visualizzare l'immagine ingrandita＊／
.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">
//Ottieni quattro oggetti
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Aggiungi evento di movimento
wrap.onmousemove=function(){
//Il mouse si sposta sull'immagine visibile dopo l'apparizione dell'area di ingrandimento bloccata e dell'immagine ingrandita
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//Ottieni la distanza di offset del mouse dal margine della visuale
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//L'intervallo massimo di movimento dell'area rettangolare
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
//giudica in modo che la regione rettangolare di ingrandimento bloccato non esca dalla cornice
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';
//ottieni il rapporto di ingrandimento
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//aggiungi evento di uscita
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>

Anteprima degli effetti:

La seconda opzione è quella di ingrandire direttamente sull'immagine originale, come farebbe una lente di ingrandimento, è un'estensione della prima opzione, il metodo precedente non ha differenze, ma non è necessario assegnare una regione visibile all'ultimo, mostrare direttamente l'immagine ingrandita nella regione di ingrandimento originale, quando si modifica la posizione left e top della regione di ingrandimento, si modifica automaticamente anche la posizione left e top dell'immagine corrispondente, per ottenere un effetto di ingrandimento sincrono

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</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;
}
//Ingrandisci l'immagine, dà posizionamento assoluto per muoversi anche quando si muove
Implementa la sincronizzazione con l'area bloccata
#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');
//Aggiungi l'evento di movimento del mouse
main.addEventListener('mousemove',move,false);
function move(){
//Mostra l'area circolare ingrandita
box.style.display='block';
var event=window.event||event;
//Ottieni la distanza di offset del mouse dal margine della visuale
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;
//L'intervallo massimo di movimento dell'area rettangolare
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//Quando ti muovi, modifica i valori di left e top dell'area circolare.
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
// Allo stesso modo, quando muovi il mouse, l'immagine ingrandita deve modificare anche i valori di left e 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);
}
// Aggiungi l'evento di mouse out
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>

Anteprima degli effetti:

Conclusione: come avete visto, in realtà non c'è molta differenza tra i due modi di ingrandire, prima di tutto devi ottenere l'area da ingrandire, ovvero il rettangolo e il cerchio di ingrandimento bloccato menzionati poc'anzi. Poi, visualizza l'immagine da ingrandire in un'area specifica. Spero che questi due segmenti di codice possano essere utili a tutti, grazie!!!

Manuale di base