Diretório de artigos
Em alguns sites de comércio eletrônico, muitas vezes é visto que existe uma função de zoom nas fotos do produto, incluindo alguns outros sites de exibição de fotos, que também têm funções semelhantes.
Se quisermos que as imagens exibam um conteúdo mais detalhado e claro, é muito econômico implementar essa função de lupa. Ela pode não apenas usar a exibição de imagens pequenas para atender às necessidades de visualização da maioria dos usuários, mas também exibir um conteúdo mais claro ampliando a imagem. . Desta forma, por um lado, pode ser economizado tráfego desnecessário de imagens grandes e as necessidades dos usuários que têm requisitos de clareza de imagem podem ser atendidas.
Portanto, este artigo usará a tecnologia front-end para implementar uma função simples de lupa de imagem, esperando trazer alguma ajuda para todos.
efeito de lupa de imagem
Podemos primeiro observar a renderização final da lupa da imagem:
como mostra a imagem acima,
a pequena caixa de imagem à esquerda é a imagem que precisa ser ampliada. Mova-se para dentro, a área coberta pela máscara representa a parte de a imagem que precisa ser ampliada; a
caixa de imagem grande à direita mostra a imagem clara depois que a parte da máscara é ampliada, que é essencialmente uma imagem de pixel inteiro exibida aqui ou uma imagem de alta resolução com pixels maiores que a esquerda.
O movimento em tempo real da camada de máscara à esquerda mostra uma imagem clara à direita, que forma o efeito funcional de uma lupa de imagem.
A seguir, vamos dar uma olhada em seu processo de implementação em detalhes.
Processo de implementação
1. Interface de interface do usuário
Para realizar a função da lupa, é necessário primeiro projetar o layout da interface. Como você pode ver na renderização acima, a interface é dividida em duas partes: uma é a área original da miniatura; a outra é a ampliada área de visualização .
Se você usar div para layout em html, ficará assim:
<div id="el_EnlargeContainer" class="enlarge">
<!--左边原始小图区域-->
<div id="el_SmallContainer" class="small">
<img id="el_SmallImage"/>
<div id="el_maskEnarge" class="mask"></div>
</div>
<!--右边预览大图区域-->
<div id="el_PreviewContainer" class="preview">
<img id="el_PreviewImage"/>
</div>
</div>
Como pode ser visto no código html acima,
a camada externa define el_EnlargeContaineruma função geral de zoom da área de conteúdo geral, que possui dois subelementos: um é um div para miniaturas, que contém um elemento img image para exibição de miniaturas, e uma camada de máscara O elemento div; o outro é a área de visualização da imagem grande, que contém o elemento img ampliado da imagem grande, e a imagem original de tamanho grande é carregada aqui.
configurações de estilo principal
A máscara precisa cobrir as miniaturas, então você precisa usar posicionamento absoluto e definir a cor com transparência. O estilo do mouse também é definido como moveoculto por padrão. O estilo CSS específico é o seguinte:
.mask {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 0, 0.6);
cursor: move;
display: none;
}
Visualize a classe de estilo da área grande da imagem preview. Como ela precisa ser exibida na área certa, você também pode usar o método de posicionamento absoluto e pode ser exibida no lado direito da área pequena da imagem:
.preview {
position: absolute;
top: 0;
left: 150px;
/* ... */
}
Outras configurações de estilo são relativamente simples e podem ser exibidas uma a uma de acordo com o método de layout, que será ignorado aqui.
Em seguida, o que precisamos fazer é carregar a imagem.
2. Carregar miniaturas
No código acima, definimos apenas o elemento img tag e não carregamos diretamente o recurso de imagem, porque implementamos a função de lupa carregando imagens dinamicamente.
Depois de carregar recursos de imagem dinamicamente, você precisa definir as informações de tamanho e posição dos elementos de interface correspondentes de acordo com a largura e a altura do pixel da imagem.
A imagem em miniatura é o primeiro recurso que precisa ser exibido no corpo principal. Precisamos carregá-la primeiro e definir o tamanho do contêiner e da imagem da área de miniaturas:
el_SmallImage.onload = () => {
let {
width, height } = el_SmallImage
const smallScale = Math.min(SMALLSIZE / width, SMALLSIZE / height, 1)
smallImgWidth = width * smallScale
smallImgHeight = height * smallScale
el_EnlargeContainer.style.width = el_SmallImage.style.width = smallImgWidth + 'px'
el_EnlargeContainer.style.height = el_SmallImage.style.height = smallImgHeight + 'px'
resolve(el_SmallImage)
}
el_SmallImage.src = imgSrc
O código acima, depois de carregar a imagem em miniatura, obtém os dados de largura e altura da imagem e calcula de acordo. Entre eles SMALLSIZEestá uma constante predefinida, que representa um tamanho fixo da área da miniatura. Você pode personalizar o valor de acordo com suas necessidades e usar esse valor para calcular a proporção de zoom da miniatura. A miniatura calcula a proporção apropriada com base na tamanho fixo. para mostrar.
Observe que o que é definido aqui é o tamanho el_EnlargeContainerda , que é o tamanho da exibição da miniatura, enquanto a visualização da imagem ampliada flutua à direita e não está incluída nesta área.
A thumbnail neste momento é a informação da imagem que nosso site deve apresentar de forma estável, como o conteúdo inicial da navegação do usuário, conforme mostra a figura a seguir:
Em sites gerais de comércio eletrônico, as informações da imagem em miniatura são exibidas usando a alternância de imagens do carrossel.
Como pode ser visto na figura acima, apenas a imagem em miniatura é exibida e a imagem de visualização ampliada não foi envolvida, porque podemos carregá-la no evento de monitoramento, o que é benéfico para economizar tráfego de carregamento de imagem.
3. Monitoramento de eventos em miniatura
Em seguida, precisamos lidar com o monitoramento de eventos da imagem em miniatura para obter o efeito de carregar a imagem de visualização e mover a máscara.
De acordo com o layout html acima, adicionamos eventos de mouse el_SmallContainerno , principalmente três eventos de onmouseenter, onmouseleavee .onmousemove
onmouseenterO evento é processado quando o mouse entra na miniatura exibida na página. Nesse momento, duas coisas precisam ser feitas: uma é carregar a imagem original da imagem de visualização e a outra é exibir a máscara e o conteúdo completo área da imagem de visualização.
el_SmallContainer.onmouseenter = async () => {
// 加载预览大图原始图
if (loadPreviewImage === null) {
loadPreviewImage = await setPreviewImage(previewImgUrl)
}
// 显示蒙层和预览大图区域
el_maskEnarge.style.display = 'block'
el_PreviewContainer.style.display = 'block'
}
O código acima é o processamento do evento de entrada do mouse, que inclui carregar e definir as informações de dados originais da imagem grande de visualização. O código específico é o seguinte:
let {
width, height } = el_PreviewImage
let previewScale = Math.min(PREVIEWSIZE / width, PREVIEWSIZE / height, 1)
el_PreviewContainer.style.width = width * previewScale + 'px'
el_PreviewContainer.style.height = height * previewScale + 'px'
el_PreviewContainer.style.left = (smallImgWidth + 10) + 'px'
el_maskEnarge.style.width = smallImgWidth * previewScale + 'px'
el_maskEnarge.style.height = smallImgHeight * previewScale + 'px'
O código acima é usado para carregar a imagem de visualização grande. Neste momento, os dados originais de largura e altura da imagem podem ser obtidos, onde PREVIEWSIZEtambém é constante predefinida, indicando um tamanho fixo da área de visualização da imagem grande. A taxa de zoom correspondente é calculada a partir da largura e altura da imagem grande e do tamanho PREVIEWSIZE, que é usado para calcular o tamanho da área de exibição real.
E o conteúdo do contêiner de imagem grande el_PreviewContainerde visualização precisa ser posicionado na área certa e lefto atributo de estilo é definido.
Além disso, o tamanho da camada de máscara também deve ser definido. O tamanho da camada de máscara é exibido na área da imagem em miniatura, mas a taxa de zoom da imagem de visualização deve ser usada, para que o conteúdo preciso da camada de máscara possa ser obtido para aumentar o zoom na área de zoom à direita.
onmouseleaveO evento é relativamente simples. Quando o mouse sai da área de conteúdo da miniatura, a máscara e a área de visualização ficam ocultas e o efeito da lupa fica oculto:
el_SmallContainer.onmouseleave = () => {
el_maskEnarge.style.display = 'none'
el_PreviewContainer.style.display = 'none'
}
Depois de definir os eventos de exibição e ocultação da lupa, o efeito do movimento deve ser processado. O movimento realiza a ampliação em tempo real e onmousemoveo evento do mouse
4. Alcançar a ampliação
O movimento do mouse também está na área de conteúdo da miniatura e el_SmallContainero elemento eventos:
el_SmallContainer.onmousemove = (event) => {
// ...
}
Nesse caso, precisamos lidar com as seguintes coisas:
- Obtenha as informações de posição do movimento do mouse
let x = event.pageX - el_EnlargeContainer.offsetLeft - el_maskEnarge.offsetWidth / 2
let y = event.pageY - el_EnlargeContainer.offsetTop - el_maskEnarge.offsetHeight / 2
No código acima, os dados de deslocamento da camada de máscara são lidos, para que o mouse possa ser exibido no centro da camada de máscara ao se mover.
- Limite o alcance móvel da máscara, que não pode exceder a área de conteúdo da miniatura
const xMax = el_SmallContainer.offsetWidth - el_maskEnarge.offsetWidth
x = x < 0 ? 0 : (x > xMax ? xMax : x)
const yMax = el_SmallContainer.offsetHeight - el_maskEnarge.offsetHeight
y = y < 0 ? 0 : (y > yMax ? yMax : y)
- Atualize as informações de localização da máscara e mova os elementos da máscara em tempo real
el_maskEnarge.style.left = x + 'px'
el_maskEnarge.style.top = y + 'px'
- Defina as informações de localização exibidas na imagem de visualização
const rate = el_PreviewImage.offsetWidth / el_SmallContainer.offsetWidth
el_PreviewImage.style.marginTop = -(rate * y) + 'px'
el_PreviewImage.style.marginLeft = -(rate * x) + 'px'
O código acima é para carregar uma imagem grande com um tamanho original completo em uma determinada área de conteúdo, mas primeiro ocultar a parte redundante overflow: hidden;. Em seguida, calcule a proporção entre a imagem em miniatura e a imagem de visualização grande e mova a imagem de visualização grande para a direita em proporções iguais usando marginTopos marginLeftatributos e para definir o posicionamento. Observe que o elemento de imagem grande el_PreviewImageoriginal .
Os dados assumem um valor negativo, que é relativo ao valor do canto superior esquerdo no momento do carregamento inicial.
Resumir
Neste ponto, uma função de lupa que pode carregar imagens dinamicamente com um tamanho não fixo é basicamente concluída.
Carregue imagens dinamicamente, independentemente da largura e altura do pixel da imagem, imagens de qualquer tamanho podem ser totalmente ampliadas e a imagem em miniatura e a imagem de visualização grande também podem ser a mesma imagem.
Além disso, a área de exibição do conteúdo da lupa é calculada dinamicamente de acordo com a proporção de diferentes imagens e o tamanho é variável, mas pode ser controlado dentro de um determinado intervalo definindo constantes.
A maioria dos códigos da função de lupa de imagem foram listados no artigo.De acordo com esse conteúdo, eles podem ser modificados adequadamente e transformados em vários plug-ins que atendam às nossas necessidades.
tamanho fixo
Muitos sites usam uma miniatura de tamanho fixo e uma visualização de uma imagem grande ao lidar com a função de lupa.
Claro, também podemos lidar com tamanhos fixos. Neste momento, precisamos de uma imagem em miniatura de um tamanho específico e a imagem grande original. Podemos definir diretamente o tamanho fixo do elemento, e a imagem em miniatura também pode ser carregada diretamente :
/* 放大镜区域的大小 */
.enlarge {
/* ... */
width: 150px;
height: 150px;
}
/* 缩略小图的大小 */
.small img {
width: 150px;
height: 150px;
}
/* 蒙层大小 */
.mask {
/* ... */
width: 75px;
height: 75px;
}
/* 预览大图区域的大小 */
.preview {
/* ... */
width: 300px;
height: 300px;
}
<img id="el_SmallImage" src="chrome.png"/>
O código acima define diretamente a largura e a altura de cada área através do css, e as miniaturas também são carregadas diretamente, dessa forma não há necessidade de definir manualmente a largura e a altura de cada elemento.
A imagem grande original também pode ser carregada no evento de entrada do mouse, e o tamanho da imagem também é corrigido neste momento.
O processamento de outros eventos é basicamente o mesmo, de modo que uma função de lupa com tamanho de imagem fixo e tamanho de interface fixo pode ser adicionada.