Muitas vezes, há uma área de exibição de produtos na página do produto do site de compras. Uma função nesta área de figura é a função de ampliação da imagem do produto. Mova a área de foco à esquerda para ampliar os detalhes e ver os detalhes. Os detalhes são os seguintes. O método para implementar esta função também é muito simples.
Experimento: Fazendo uma imagem ampliada do foco do produto.
Habilidades necessárias:
1. Métodos básicos para obter elementos de página;
2. Alguns eventos simples;
3. Você usará DOM para definir os atributos do elemento;
Princípio do caso:
1. Siga o evento do mouse da caixa de foco;
2. Regulamentos na área móvel da caixa de foco;
3. Exibição de conteúdo de caixas grandes;
Adequado para: JS Beginners
-------------------------------------------------------------------começar! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Primeiro, preparamos o estilo CSS. Vários pontos que precisam receber atenção no estilo CSS são:
(1) O mapa de foco é relativo à posição, exibição padrão: Nenhum;
(2) A caixa mostrando a imagem grande à direita (a seguir denominada exibição padrão de imagem de imagem grande): Nenhum; O conteúdo no quadro de imagem grande deve ser oculto após o transbordamento: oculto;
2. Comece a escrever o código de script:
(1) Primeiro obtenha o elemento da página:
// Primeiro de tudo, a função de elemento getId (tag) a ser operada {// define um método para obter elementos com ID, o que reduz muita carga de trabalho! retornar document.getElementById (tag)} var box = getId ("caixa"); var pequeno = getId ("pequeno"); var máscara = getId ("máscara"); var big = getId ("grande"); var pic = big.Children [0]; // aqui está para obter elementos através do método do nó(2) Certifique -se de que dois eventos apareçam quando o mouse se mover para a pequena imagem: 1) a caixa de foco deve ser mostrada; 2) A caixa de imagem grande deve ser mostrada. Da mesma forma, depois que o mouse for removido, essas duas folhas devem ser canceladas.
// dois efeitos aparecem ao mover o mouse para a imagem small.onMouseOver = function () {Mask.style.display = "block"; big.style.display = "bloco"; } small.onMouseOut = function () {Mask.style.display = "nenhum"; big.style.display = "nenhum"}(3) Defina o seguinte da caixa de foco:
1) Quando a caixa de foco é definida, nossa hora de seguir é um fato; portanto, o tipo de evento aqui não é o OnMouseOver; mas onmousemove;
2) O problema envolvido neste código é principalmente um problema de cálculo de posicionamento da máscara (caixa de foco). O problema fácil de ignorar é cuja posição a máscara se move? No meu estilo CSS, a máscara é colocada na caixa pequena; portanto, a posição de movimento relativa deve ser a posição do elemento pai pequeno que foi posicionado. Portanto, as coordenadas de posição que recebo com o ClientX e a Cliente em relação à janela atual do navegador não podem ser usadas diretamente, e a influência do valor da margem de sua caixa pai deve ser subtraída.
// defina a caixa de foco da imagem pequena e siga o mouse; small.onMousEMove = function (e) {var marginl = box.offSetLeft; // Use o método OffsetLeft para obter a margem-esquerda da caixa var margint = box.offsettop; // Use o método OffsetTop para obter a margem da caixa var currentx = e.clientX; var atualização = e.clienty; // Use E.Clinety e E.Clinety em relação ao canto superior esquerdo do navegador var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offsetHeight/2; // Para alinhar o centro da caixa de foco com o mouse, você precisa subtrair metade da largura e altura do foco caixa/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) Movimento da posição da caixa de foco ocioso
1) Após a conclusão da etapa anterior, o movimento da caixa de foco não está ocioso. Durante o processo de navegação no site de compras, podemos sentir claramente que a caixa de foco não permite movimentos fora da imagem pequena, causando uma má experiência do usuário;
2) Para limitar o movimento da caixa de foco, principalmente quando a alteração X e Y exceder o valor permitido, dê um valor fixo;
// defina a caixa de foco da imagem pequena e siga o mouse; small.onMousEMove = function (e) {var marginl = box.offSetLeft; var margint = box.offSettop; var currentx = e.clientX; var atualização = e.clienty; var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offsetHeight/2; // Defina a área de movimento para a caixa de foco se (x <0) {x = 0;} if (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; // O valor mínimo de x usado para o posicionamento é 0 e o valor máximo é o comprimento do eixo Y de comprimento de pequena máscara. O mesmo vale para o eixo y if (y <0) {y = 0;} if (y> small.offSethEight-mask.offsetHeight) {y = small.offsetHeight-mask.offsetHeight}; mask.style.left = x+"px"; // Observe que a área de movimento é escrita após a área de movimento ser especificada e preste atenção à ordem de execução da máscara de código.style.top = y+"px";(5) Defina a exibição de imagens grandes
1) Para realizar o movimento da imagem na caixa grande, você deve pensar no valor -margin;
2) Qual a distância que você pode mover pode ser usada para multiplicar os valores esquerda e superior da máscara por uma proporção fixa. Pense na posição exibida no canto superior esquerdo da área de foco e no canto superior esquerdo da grande estrutura de imagem são os mesmos! ! ! Isso não é muito difícil de entender.
// Defina o conteúdo exibido na caixa grande var relativax = mask.offsetLeft; var relativo = Mask.OffSettop; var Proporationx = pic.OffSetWidth/small.offsetWidth; // Defina a proporção var à Proporção = pic.OffSetHeight/small.offsetWidth; pic.style.marginleft = -relativex*Proporationx+"px"; //Observação! O valor da margem deve ser negativo, "PX não joga fora pic.style.Margintop = -Relative*Proporporation+" PX ";
Neste ponto, nossa demonstração terminou! Não é muito simples
Vou colar o código inteiro abaixo, na esperança de discutir e me comunicar com você.
Aqui está o código CSS
<Toy> * {margem: 0; preenchimento: 0; } #Box {margem: 50px; } #small {width: 229px; Altura: 250px; borda: 1px preto sólido; Alinhamento de texto: centro; Posição: relativa; flutuar: esquerda; } #mask {width: 100px; Altura: 100px; Background-Color: RGBA (214, 111, 193, 0,3); Posição: Absoluto; topo: 0; Esquerda: 0; /*Display: Nenhum;*/} #big {width: 350px; Altura: 350px; borda: 1px preto sólido; flutuar: esquerda; estouro: oculto; /*Display: Nenhum;*/} </style>Aqui está HTML
<Body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </div> </div> <div id = "big"> <img src = "big_img.jpg"/> </div> </div>
Aqui está o código JS
<Cript> // Primeiro de tudo, o elemento a ser operado function getId (tag) {retornar document.getElementById (tag)} var box = getId ("caixa"); var pequeno = getId ("pequeno"); var máscara = getId ("máscara"); var big = getId ("grande"); var pic = big.Children [0]; console.log (pic); // O mouse se move para a imagem e dois efeitos parecem pequenos.onMouseOver = function () {Mask.style.display = "block"; big.style.display = "bloco"; } small.onMouseOut = function () {Mask.style.display = "nenhum"; big.style.display = "nenhum"} // Defina a caixa de foco da imagem pequena e siga o mouse; small.onMousEMove = function (e) {var marginl = box.offSetLeft; var margint = box.offSettop; var currentx = e.clientX; var atualização = e.clienty; var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offsetHeight/2; // Defina a área de movimento para a caixa de foco se (x <0) {x = 0;} if (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; if (y <0) {y = 0;} if (y> small.offsetHeight-mask.offsetHeight) {y = small.offsetHeight-mask.offsetheight}; mask.style.left = x+"px"; mask.style.top = y+"px"; // Defina o conteúdo exibido na caixa grande var relativax = mask.offsetLeft; var relativo = Mask.OffSettop; var relativo = Mask.OffSettop; var Proporationx = pic.OffSetWidth/small.offsetWidth; var Proporção = pic.offSethEight/small.offsetWidth; pic.style.marginleft = -relativex*Proporationx+"px"; pic.style.margintop = -relative*Proporporation+"px"; } </script>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.