A menudo hay un área de visualización de productos en la página del producto del sitio web de compras. Una función en esta área es la función de aumento de la imagen del producto. Mueva el área de enfoque a la izquierda para ampliar los detalles y ver los detalles. Los detalles son los siguientes. El método para implementar esta función también es muy simple.
Experimento: hacer una imagen ampliada del enfoque del producto.
Habilidades requeridas:
1. Métodos básicos para obtener elementos de página;
2. Algunos eventos simples;
3. Usará DOM para establecer los atributos del elemento;
Principio del caso:
1. Sigue el evento del mouse de la caja de enfoque;
2. Regulaciones en el área móvil de la caja de enfoque;
3. Visualización de contenido de cajas grandes;
Adecuado para: JS principiantes
-------------------------------------------------------------------¡comenzar! ---------------------------------------------------------------------------------------------------
1. Primero, preparamos el estilo CSS. Varios puntos a los que deben prestarse atención en el estilo CSS son:
(1) El mapa de enfoque es relativo a la posición, visualización predeterminada: ninguno;
(2) el cuadro que muestra la imagen grande a la derecha (en lo sucesivo, denominado la pantalla de imagen grande) Pantalla predeterminada: Ninguno; El contenido en el marco de la imagen grande debe estar oculto después del desbordamiento: oculto;
2. Comience a escribir el código de script:
(1) Primero obtenga el elemento de página:
// En primer lugar, la función de elemento getId (etiqueta) se operará {// defina un método para obtener elementos con ID, lo que reduce mucha carga de trabajo. return document.getElementById (tag)} var box = getId ("box"); var small = getId ("pequeño"); var máscara = getId ("máscara"); var big = getId ("big"); var pic = big.children [0]; // aquí es obtener elementos a través del método de nodo(2) Asegúrese de que aparezcan dos eventos cuando el mouse se mueva a la imagen pequeña: 1) se debe mostrar el cuadro de enfoque; 2) Se debe mostrar el cuadro de imagen grande. Del mismo modo, después de retirar el mouse, estas dos hojas deben cancelarse.
// Dos efectos aparecen al mover el mouse a la imagen small.onmouseover = function () {Mask.style.display = "bloque"; big.style.display = "bloque"; } small.onmouseOut = function () {Mask.style.display = "Ninguno"; big.style.display = "Ninguno"}(3) Establezca lo siguiente del cuadro de enfoque:
1) Cuando se establece el cuadro de enfoque, nuestro tiempo de seguimiento es un hecho, por lo que el tipo de evento aquí no es en Mouseover; pero en elmousto;
2) El problema involucrado en este código es principalmente un problema de cálculo de posicionamiento de máscara (cuadro de enfoque). ¿El problema que es fácil de ignorar es de qué posición se mueve la máscara? En mi estilo CSS, la máscara se coloca en la caja pequeña, por lo que la posición de movimiento relativo debe ser la posición del elemento principal que se ha colocado. Por lo tanto, las coordenadas de posición que obtengo con ClientX y Clienty en relación con la ventana actual del navegador no pueden usarse directamente, y la influencia del valor de margen de su cuadro principal debe restarse.
// Establezca el cuadro de enfoque de la imagen pequeña y siga el mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; // use el método offsetStleft para obtener el margen-izquierda de la caja var margint = box.offsettop; // Use el método Offsettop para obtener el margen-top de la caja var currentx = e.clientx; Var Currenty = E.Clienty; // Use E.Clinety y E.Clinety en relación con la esquina superior izquierda del navegador var x = CurrentX-Marginl-Mask.OffSetWidth/2; var y = corriente-margint-mask.offsetheight/2; // Para alinear el centro de la caja de enfoque con el mouse, debe restar la mitad del ancho y la altura del enfoque caja/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------(4) Movimiento de la posición de la caja de enfoque inactivo
1) Después de completar el paso anterior, el movimiento del cuadro de enfoque no está inactivo. Durante el proceso de navegar por el sitio web de compras, podemos sentir claramente que el cuadro de enfoque no permite el movimiento fuera de la imagen pequeña, causando una mala experiencia del usuario;
2) Para limitar el movimiento del cuadro de enfoque, principalmente cuando el cambio X e Y excede el valor permitido, le dé un valor fijo;
// Establezca el cuadro de enfoque de la imagen pequeña y siga el mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; Var Currenty = E.Clienty; var x = currentx-marginl-Mask.OffSetWidth/2; var y = corriente-margint-mask.offsetheight/2; // Establezca el área móvil para el cuadro de enfoque if (x <0) {x = 0;} if (x> small.offsetwidth-mask.offsetwidth) {x = small.offsetwidth-mask.offsetwidth}; // El valor mínimo de x utilizado para el posicionamiento es 0, y el valor máximo es la longitud del eje Y de longitud de la masilla pequeña. Lo mismo es cierto para el eje y if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offsetheight-mask.offsetheight}; Mask.style.left = x+"Px"; // Tenga en cuenta que el área móvil está escrita después de especificar el área de movimiento y preste atención a la orden de ejecución del código Mask.style.top = y+"Px";(5) Establezca la visualización de imágenes grandes
1) Para darse cuenta del movimiento de la imagen en la caja grande, debe pensar en el valor de la margen;
2) ¿Cuánta distancia puede moverse para multiplicar los valores izquierdo y superior de la máscara por una proporción fija? ¡Piense en la posición que se muestra en la esquina superior izquierda del área de enfoque y la esquina superior izquierda del marco de imagen grande es la misma! ! ! Esto no es muy difícil de entender.
// Establezca el contenido que se muestra en el cuadro grande var relativex = mask.offsetleft; var relaty = Mask.offsettop; var proporationx = pic.OffSetWidth/small.offsetWidth; // Establecer la proporción VAR VAR = PIC.OFFSETHEight/Small.OffSetWidth; pic.Style.Marginleft = -RelativeX*PROPORATORX+"PX"; //¡Nota! El valor del margen debe ser negativo, "Px no tire pic.style.margintop = -relativey*proporation+" px ";
En este punto, ¡nuestra demostración está terminada! ¿No es muy simple?
Pegaré todo el código a continuación, con la esperanza de discutir y comunicarme con usted.
Aquí está el código CSS
<syle> * {margen: 0; relleno: 0; } #box {margen: 50px; } #small {ancho: 229px; Altura: 250px; borde: 1px negro sólido; Text-Align: Center; Posición: relativo; flotante: izquierda; } #mask {ancho: 100px; Altura: 100px; Color de fondo: RGBA (214, 111, 193, 0.3); Posición: Absoluto; arriba: 0; Izquierda: 0; /*Display: None;*/} #Big {Width: 350px; Altura: 350px; borde: 1px negro sólido; flotante: izquierda; desbordamiento: oculto; /*Display: None;*/} </style>Aquí 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>
Aquí está el código JS
<script> // En primer lugar, el elemento a operar la función getId (tag) {return document.getElementById (tag)} var box = getId ("box"); var small = getId ("pequeño"); var máscara = getId ("máscara"); var big = getId ("big"); var pic = big.children [0]; console.log (foto); // El mouse se mueve a la imagen y dos efectos aparecen pequeños.onmouseover = function () {Mask.style.display = "bloque"; big.style.display = "bloque"; } small.onmouseOut = function () {Mask.style.display = "Ninguno"; big.style.display = "Ninguno"} // Establezca el cuadro de enfoque de la imagen pequeña y siga el mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; Var Currenty = E.Clienty; var x = currentx-marginl-Mask.OffSetWidth/2; var y = corriente-margint-mask.offsetheight/2; // Establezca el área móvil para el cuadro de enfoque if (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"; // Establecer el contenido que se muestra en el cuadro grande var relativex = mask.offsetleft; var relaty = Mask.offsettop; var relaty = Mask.offsettop; var proporationx = pic.OffSetWidth/small.offsetWidth; VAR PROPORACIÓN = PIC.OFFSETHEight/Small.OffSetWidth; pic.Style.Marginleft = -RelativeX*PROPORATORX+"PX"; pic.Style.MarGintOp = -Relativey*Proporationy+"Px"; } </script>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.