Fiquei um pouco empolgado quando publiquei um blog pela primeira vez. Agora estou em Tianjin. Espero trabalhar no setor de front-end no futuro e não poderei estudar por um longo tempo. Para registrar meu processo de aprendizado e ganhos, é claro que sou uma consolidação. As coisas que escrevo podem não ser tão altas quanto o grande touro, mas são apenas um conteúdo básico. Claro, também vou coletar alguns bons artigos que eu acho que são bons (na verdade, eu posso entendê -los mais ...). Acredito que posso escrever algo sofisticado no futuro. vamos!
Eu falo um pouco de bobagem, falo sobre assuntos sérios. Alguns dias atrás, eu assisti a um vídeo de ensino da educação em Tanzhou. O professor usou jQuery para alcançar o efeito de uma lupa (o professor disse que era muito lento e ele estava pulando e assistindo). Como não aprendi bem no jQuery, mas o código básico ainda é compreensível, quero praticar com o JS que estou aprendendo atualmente e finalmente alcançou esse efeito.
Ideia: primeiro deixe o bloco de mover e o bloco BIMG ocultar. Quando o mouse se move para a caixa, o bloco de movimentos e o bloco BIMG são exibidos e a posição atual do mouse é obtida. Então, após o cálculo, o valor apropriado para o bloco de movimentos e o bloco BIMG é dado para alcançar o efeito da lupa (o cálculo da posição do bloco de movimentos e o bloco BIMG é detalhado posteriormente)
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <titter> Ligna </ititle> <link href = "css/bigimg.css" rel = "StyleSheet"/> <script src = "js/bigimg.js" onLload = "bigImg ()"> <div id = "box"> <img src = "imagens/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "imagens/bimg.jpg"> <//hivs> </hiv "
Estilo CSS:
*{margem: 0px; preenchimento: 0px;}#caixa {width: 430px; Altura: 430px; margem: 100px; margem-esquerda: 17%; Posição: relativa; // Use o posicionamento relativo aqui para que outros elementos possam confiar nesse elemento para posicionar} #move {background-image: url (../ imagens/move.png); Largura: 220px; Altura: 220px; Posição: Absoluto; Esquerda: 0px; Top: 0px; Exibir: Nenhum; // Deixe ocultar primeiro e use JS para exibi -lo} #bimg {width: 430px; Altura: 430px; estouro: oculto; Posição: Absoluto; Top: 0px; Esquerda: 450px; Exibir: Nenhum; // Deixe ocultar primeiro e use JS para exibi -lo} #bimg img {width: 800px; Altura: 800px; Posição: Absoluto; Top: 0px; Esquerda: 0px;}JavaScript:
function bigimg () {var bbox = document.getElementById ("caixa"); var bmove = document.getElementById ("move"); var bbimg = document.getElementById ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onMouseOver = function () {// Mova o mouse para fazer a caixa para exibir imagens grandes e selecionar caixas bbimg.style.display = "bloco"; bmove.style.display = "bloco"; } bbox.onmouseout = function () {// mousemove não exibe imagens grandes e caixas de seleção quando a caixa é afastada do mouse bbimg.style.display = "nenhum"; bmove.style.display = "nenhum"; } bbox.onMouSEMove = function (e) {// Obtenha a posição do mouse var x = e.clientX; // a posição do mouse em relação ao viewport var y = e.clienty; var t = bbox.OffSetTop; // A posição da caixa em relação ao viewport var L = bbox.offsetleft; var _left = x - l - bmove.offsetWidth/2; // Calcule a posição do movimento var _top = y - t -bMove.OffSetHeight/2; if (_top <= 0) // desliza para a parte superior do box_top = 0; caso contrário, if (_top> = bbox.offsetheight-bmove.offsetHeight) // desliza para a parte inferior do box_top = bbox.offsetheight-bmove.offsetheight; if (_left <= 0) // desliza para o mais à esquerda do box_left = 0; caso contrário, if (_left> = bbox.offsetWidth-bmove.offsetWidth) // desliza para a direita da caixa box_Left = bbox.offsetWidth-bmove.offsetWidth; bmove.style.top = _top + "px"; // Defina a posição de mover bmove.style.left = _left + "px"; var w = _left/(bbox.offsetWidth-bmove.offsetWidth); // Calcule a razão de movimento var h = _top/(bbox.offsetheight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // calcule a posição da imagem grande var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidthth)*w; b_bimg.style.top = -b_bimg_top + "px"; // Defina as informações de localização da imagem grande b_bimg.style.left = -b_bimg_left + "px"; }}Imagem de reprodução:
1. Cálculo do bloco de movimentos
Arqueiro preto:
var x = e.clientX; // a posição do mouse em relação à viewport var y = e.clienty;
Arqueiro vermelho:
var t = bbox.OffSetTop; // A posição da caixa em relação ao viewport var L = bbox.offsetLeft;
Arrows de laranja:
var _left = x - l - bmove.offsetWidth/2; // Calcule a posição de mover var _top = y - t -bMove.offSethEight/2;
2. Cálculo do bloco BIMG
Use a escala do bloco de movimentos dentro do intervalo móvel para definir a posição da imagem grande
Mover faixa de bloco de movimentos:
bbox.offsetWidth-bmove.offsetWidth
As coordenadas atuais da mudança de bloco de movimentação da faixa móvel:
var w = _left/(bbox.offsetWidth-bmove.offsetWidth); // Calcule a razão de movimento var h = _top/(bbox.offsetheight-bmove.offsetHeight);
A amplitude de movimento da BIMG:
b_bimg.offsetheight-bbimg.offsetheight
Localização de Bimg:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // calcule a posição da imagem grande var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidthth)*w;
O exemplo simples acima do uso de JS para alcançar o efeito de uma lupa é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.