Este artigo compartilha o efeito de aumento da imagem do JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css"> #div1 {width: 300px; Altura: 300px; Posição: relativa; Margem: 30px Auto 0px; } #div1 img {width: 300px; } #div1 span {width: 150px; Altura: 150px; Antecedentes: vermelho; Posição: Absoluto; Esquerda: 0px; Top: 0px; Exibir: Nenhum; Opacidade: 0,2; } .show {width: 100%; Altura: 100%; Antecedentes: vermelho; Posição: Absoluto; Esquerda: 0px; Top: 0px; Z-Index: 10px; Opacidade: 0,1; } #div2 {width: 300px; Altura: 300px; Posição: relativa; TOP: -300PX; Esquerda: 300px; Exibir: Nenhum; estouro: oculto; margem: 0px auto 0px; } #img1 {posição: absoluto; } </style> </ad Head> <body> <div id = "div1"> <!-Picture-> <img src = "imagens/xiangqing.png"> <!-Caixa de seleção do mouse-> <rpa> </span> <!-Background-> <div> <//div> <div id idan </span> <! src = "Images/xiangqingda.png"/> </div> </body> <cript> // Após o carregamento é concluído, window.onload = function () {var odiv = document.getElementById ('div1'); var oshow = document.getElementsByClassName ('show') [0]; var ospan = document.getElementsByTagName ('span') [0]; var oimg = document.getElementById ('img1'); // parentNode recebe o nó pai Oshow.onMouseOver = function () {ospan.style.display = 'bloqueio'; oimg.parentnode.style.display = 'bloco'; }; oshow.onmouseout = function () {ospan.style.display = ''; oimg.parentnode.style.display = ''; }; // amplificador move oshow.onMousemove = function (ev) {// Resolva problemas de compatibilidade do navegador var oevent = ev || event; // obtenha a posição do mouse var x = oevent.offsetx-ospan.offsetWidth/2; var y = oevent.offsety-ospan.offsetHeight/2; // console.log (oevent.clienty); // console.log (odiv.offsettop); // console.log (ospan.offSethEight/2); // console.log (oevent.clienty); if (x <0) {x = 0; } else if (x> oshow.offsetWidth-ospan.offsetWidth) {x = Oshow.offsetWidth-ospan.offsetWidth; } if (y <0) {y = 0; } else if (y> Oshow.offsetHeight-ospan.offsetHeight) {y = Oshow.offsetHeight-ospan.offsetHeight; } // Posicione a caixa selecionada ospan.style.left = x+'px'; ospan.style.top = y+'px'; // Posicionar o amplificador var percentx = x/(oshow.offsetWidth-ospan.offsetWidth); var porcenty = y/(oshow.offsetHeight-ospan.offsetHeight); var oimgParent = oimg.parentNode; oimg.style.left = -percentX*(oimg.offsetWidth-oimgparent.offsetWidth)+'px'; oimg.style.top = -Percenty*(oimg.offsetHeight-oimgparent.offsetHeight)+'px'; }; }; }; </script> </html>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.