English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Hoje, vou compartilhar com vocês um efeito de lupa de imagem que escrevi com JavaScript, fiz dois tipos de efeitos de ampliação, na verdade, seus princípios são semelhantes, ambos usam duas imagens para definir tamanhos correspondentes para duas imagens, e finalmente mostram em diferentes posições, realizando assim o efeito de ampliação.
O primeiro é uma cópia do efeito lupa da página de compras da Taobao, quando o mouse se move sobre a imagem do produto, uma área retangular aparecerá na imagem do produto, e essa área é a área que você deseja ampliar, e uma imagem do produto amplificada aparecerá ao lado direito da imagem do produto. Esse tipo de ampliação precisa calcular a proporção de ampliação, e então usar o valor de scrollLeft e scrollTop da área de ampliação para implementar o efeito de ampliação correspondente.
<!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">
//obter os quatro objetos
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//adicionar evento de movimento
wrap.onmousemove=function(){
//ao passar o mouse sobre a imagem visível, aparecerá a área de ampliação fixa e a imagem ampliada
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//obter a distância do cursor até a borda da área visível
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//a maior faixa de movimentação da área retangular
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
// julgar para que a área retangular de ampliação fixa não saia da caixa
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';
//obter a proporção de ampliação
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//adicionar evento de saída
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>
Visualização de Efeito:
A segunda opção é ampliar diretamente na imagem original, como uma lupa sobre ela, isso é uma extensão da primeira opção, os métodos anteriores não têm diferenças, apenas no final não é necessário definir uma área visível para ele, exibir diretamente na área de ampliação original a imagem ampliada, ao modificar os valores de left e top da área de ampliação, modificar automaticamente os valores de left e top da imagem correspondente, para implementar o efeito de ampliação 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 a imagem dar posição absoluta para que ela possa se mover ao longo do movimento
realizar a sincronização com a área que estamos bloqueando
#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');
//adicionar evento de movimento do mouse
main.addEventListener('mousemove',move,false);
function move(){
//exibir a área circular ampliada
box.style.display='block';
var event=window.event||event;
//obter a distância do cursor até a borda da área visível
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;
//a maior faixa de movimentação da área retangular
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//Quando você move, altere os valores de left e top da área circular.
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
//Da mesma forma, quando você move, a imagem ampliada também deve modificar os valores de 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);
}
// Adicionar evento de mouse sair
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>
Visualização de Efeito:
Conclusão: Como você também pode ver, na verdade, as duas maneiras de ampliar não têm muita diferença. Primeiro, você precisa obter a área a ser ampliada, ou seja, o retângulo e o círculo mencionados anteriormente como a área de fixação da ampliação. Em seguida, dê uma área para exibir a imagem a ser ampliada. Espero que esses dois trechos de código sejam úteis para vocês, obrigado!!!