English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Hoy les comparto un efecto de amplificador de imágenes que escribí con JavaScript. Hice dos tipos de efectos de ampliación, pero en realidad tienen el mismo principio, ambos utilizan dos imágenes para establecer el tamaño correspondiente de las dos imágenes y finalmente mostrarlas en diferentes posiciones para lograr el efecto de ampliación.
Hay dos tipos: uno es imitar el efecto lupa de la página de compras de Taobao. Cuando el ratón se mueve sobre la imagen del producto, aparecerá un área rectangular en la imagen del producto, y esta área es la que desea ampliar. Luego, a la derecha de la imagen del producto aparecerá una imagen del producto ampliada. Este método de ampliación solo requiere que calcule bien la proporción de ampliación y luego realice el efecto de ampliación correspondiente mediante la modificación de los valores scrollLeft y scrollTop del área de ampliación.
<!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">
//Obtener cuatro objetos
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Agregar evento de movimiento
wrap.onmousemove=function(){
//Aparece el área de ampliación bloqueada y la imagen ampliada después de que el ratón se mueve sobre la imagen visible
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//obtener la cantidad de desplazamiento del mouse desde el borde de la área visible
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//la mayor área móvil del rectángulo
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
// Determinar que el rectángulo de ampliación bloqueado no puede salir del cuadro
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';
//Obtener la proporción de ampliación
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//Agregar evento de salida
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>
Vista previa de efectos:
La segunda opción es ampliar directamente la imagen original, como si fuera un lupa sobre ella, esta es una extensión de la primera opción, los métodos anteriores no tienen diferencias, solo que al final no es necesario colocar una área visible, muestra directamente la imagen ampliada en el área de ampliación original que se había definido, al modificar los valores de left y top del área de ampliación, se modifican automáticamente los valores de left y top de la imagen correspondiente, logrando un efecto de ampliación sincronizada
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Amplificador</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;
}
//ampliar la imagen, permitir que el desplazamiento sea absolutamente móvil
realizar la sincronización con la área bloqueada
#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');
//agregar evento de movimiento del mouse
main.addEventListener('mousemove',move,false);
function move(){
//mostrar el área circular ampliada
box.style.display='block';
var event=window.event||event;
//obtener la cantidad de desplazamiento del mouse desde el borde de la área 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 mayor área móvil del rectángulo
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//Cuando se mueve, se modifican los valores de left y top del área circular.
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
//Del mismo modo, cuando se mueve, la imagen ampliada también debe modificar los valores de left y 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);
}
// Agregar evento de ratón saliendo
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>
Vista previa de efectos:
Resumen: Como pueden ver, realmente no hay mucha diferencia entre las dos formas de ampliar, primero debes obtener la área que deseas ampliar, es decir, el rectángulo y el círculo mencionados anteriormente como área de bloqueo de ampliación. Luego, muestra la imagen que deseas ampliar en una área determinada. Espero que estos dos fragmentos de código les sean útiles, ¡gracias a todos!!