Estaba un poco emocionado cuando publiqué un blog por primera vez. Ahora estoy en Tianjin. Espero trabajar en la industria frontal en el futuro y no podré estudiar durante mucho tiempo. Para registrar mi proceso de aprendizaje y ganancias, por supuesto, soy una consolidación. Las cosas que escribo pueden no ser tan altas como el Big Bull, pero son solo un contenido básico. Por supuesto, también recopilaré algunos buenos artículos que creo que son buenos (en realidad, puedo entenderlos más ...). Creo que puedo escribir algo de alta gama en el futuro. ¡vamos!
Hablo un poco sin sentido, hablo de asuntos serios. Hace unos días, vi un video de enseñanza de la educación de Tanzhou. El maestro usó jQuery para lograr el efecto de una lupa (el maestro dijo que era demasiado lento y que estaba saltando y mirándolo). Como no he aprendido bien jQuery, pero el código básico aún es comprensible, quiero practicar con el JS que estoy aprendiendo actualmente y finalmente logré con éxito este efecto.
Idea: primero deje que el movimiento se bloquee y el bloque BIMG se esconda. Cuando el mouse se mueve al cuadro, se muestran el bloque de movimiento y el bloque BIMG, y se obtiene la posición actual del mouse. Luego, después del cálculo, se administra el valor apropiado para el bloque de movimiento y el bloque BIMG para lograr el efecto de lupa (el cálculo de la posición del bloque de movimiento y el bloque BIMG se detalla más adelante)
<! Doctype html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> lupa de lupa </title> <link href = "css/bigimg.css" rel = "stylesheet"/> <script src = "js/bigimg.js"> </script> </head> <Head> <body> = ") <div id = "box"> <img src = "imágenes/simg.jpg"> <div id = "mover"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "imágenes/bimg.jpg"> </div> </div> </body> </html>
Estilo CSS:
*{margen: 0px; Pading: 0px;}#box {ancho: 430px; Altura: 430px; margen: 100px; margen-izquierda: 17%; Posición: relativa; // Use el posicionamiento relativo aquí para que otros elementos puedan confiar en este elemento para posicionar} #move {background-image: url (../ images/move.png); Ancho: 220px; Altura: 220px; Posición: Absoluto; Izquierda: 0px; arriba: 0px; Display: Ninguno; // Déjelo esconderse primero y use JS para mostrarlo} #bimg {ancho: 430px; Altura: 430px; desbordamiento: oculto; Posición: Absoluto; arriba: 0px; Izquierda: 450px; Display: Ninguno; // Déjelo esconderse primero y use JS para mostrarlo} #bimg img {width: 800px; Altura: 800px; Posición: Absoluto; arriba: 0px; Izquierda: 0px;}JavaScript:
function bigImg () {var bbox = document.getElementById ("box"); var bMove = document.getElementById ("Move"); var bbimg = document.getElementById ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onmouseover = function () {// Mover el mouse a la caja para mostrar imágenes grandes y seleccionar cuadros bbimg.style.display = "bloque"; bmove.style.display = "bloque"; } bbox.onmouseout = function () {// mouseMove no muestra imágenes grandes y casillas de verificación cuando la caja se aleja del mouse bbimg.style.display = "none"; bmove.style.display = "Ninguno"; } bbox.onmouseMove = function (e) {// Obtener la posición del mouse var x = e.clientx; // La posición del mouse en relación con la ventana gráfica var y = e.clienty; var t = bbox.offsettop; // La posición del cuadro relativo a la visión var l = bbox.offsetleft; var _left = x - l - bmove.offsetWidth/2; // Calcule la posición del movimiento var _TOP = y - t -bmove.OffSetheTeight/2; if (_top <= 0) // deslizar hacia la parte superior del box_top = 0; else if (_top> = bbox.offsetheight-bmove.offsetheight) // deslizar hacia la parte inferior del box_top = bbox.offsetheight-bmove.offsetheight; if (_left <= 0) // deslizar hacia la izquierda más de la izquierda del box_left = 0; else si (_left> = bbox.offsetwidth-bmove.offsetwidth) // deslice a la derecha más del box_left = bbox.offsetwidth-bmove.offsetwidth; bmove.style.top = _TOP + "PX"; // Establezca la posición de Move BMove.style.left = _left + "Px"; var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // Calcule la relación de movimiento var h = _top/(bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Calcule la posición de la imagen grande var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*W; b_bimg.style.top = -b_bimg_top + "px"; // Establezca la información de ubicación de la imagen grande b_bimg.style.left = -b_bimg_left + "px"; }}Imagen de reproducción:
1. Cálculo del bloque de movimiento
Flecha negra:
var x = e.clientx; // La posición del mouse en relación con la ventana gráfica var y = e.clienty;
Flecha roja:
var t = bbox.offsettop; // La posición de la caja relativa a la visión var l = bbox.offsetleft;
Flechas de naranja:
var _left = x - l - bmove.offsetwidth/2; // Calcule la posición de movimiento var _top = y - t -bmove.offsetheight/2;
2. Cálculo del bloque BIMG
Use la escala del bloque de movimiento dentro del rango móvil para establecer la posición de la imagen grande
Rango de movimiento del bloque de movimiento:
bbox.offsetwidth-bmove.offsetwidth
Las coordenadas actuales del bloque de movimiento cuenta para el rango móvil:
var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // Calcule la relación de movimiento var h = _top/(bbox.offsetheight-bmove.offsetheight);
El rango de movimiento de Bimg:
b_bimg.offsetheight-bbimg.offsetheight
Ubicación de Bimg:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Calcule la posición de la imagen grande var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*W;
El ejemplo simple anterior de usar JS para lograr el efecto de una lupa es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.