En este proyecto, vamos a crear un control deslizante de imágenes con el que podemos verificar 2 imágenes. Si estamos haciendo una copia exacta de ellos. Podemos comparar cada límite individual de la primera imagen con la segunda imagen en las direcciones vertical y horizontal.
Acercarse:
- Cree un archivo HTML en el que vamos a agregar el div principal , además estamos agregando dos div para agregar imágenes en ellos.
- Cree un archivo CSS para agregar imágenes en el div respectivo .
- Cree un archivo JavaScript para cambiar la dirección y compare las 2 imágenes.
Código HTML:
- En primer lugar, cree un archivo HTML (index.html).
- Ahora, después de la creación de nuestro archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe colocarse entre la etiqueta <head>.
- Luego vinculamos el archivo CSS que proporciona todas las imágenes de fondo a nuestro HTML. Esto también se coloca entre la etiqueta <head>.
- Llegando a la sección del cuerpo de nuestro código HTML.
- En primer lugar, cree un div principal como cuadro principal.
- En ese div, agregue 2 divs más para agregar la imagen 1 y la imagen 2.
- Al final de nuestro cuerpo, agregue la etiqueta <script> que vincula el archivo JavaScript con nuestro archivo HTML.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1> PRESS:'v' for vertical movement & 'h' \ for horizontal movement </h1> <div class="main_box"> <div class="img1"></div> <div class="img2"></div> </div> <script src="index.js"></script> </body> </html>
Código CSS: El siguiente es el contenido del archivo «style.css» utilizado en el código anterior. CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que se vea interactiva para todos los usuarios. Considere los siguientes puntos.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
style.css
/* restoring all of the browser effects */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
/* same effects to the body */
body{
background-color: #000;
color: #fff;
}
/* positioning of heading */
h1{
display: flex;
justify-content: center;
}
/* positions of main div and 2 images */
.main_box,.img1,.img2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_box{
margin-top: 2em;
margin-bottom: 2em;
}
.img1{
background-image: url(image-url);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img2{
background-image: URL(image-url);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
left: 50%;
background-attachment: fixed;
border-top: solid red 5px;
border-left: solid red 5px;
}
Código JavaScript: A continuación, escribimos código para
- Detección de movimiento del mouse para movimiento de imágenes.
- Uso de diferentes teclas de teclado en detectores de eventos para movimiento vertical y horizontal.
document.querySelector('css_selector')
=> returns the first element that matches with specified CSS selector.
Guía para el movimiento vertical y horizontal
- Movimiento horizontal predeterminado del control deslizante.
- El movimiento vertical está activo cuando el usuario presiona la tecla (v) una vez.
- El movimiento horizontal vuelve a estar activo cuando el usuario presiona la tecla (h) una vez.
Nota: La v y la h solo son válidas en un caso pequeño.
El siguiente es el contenido del archivo «index.js» utilizado en el código HTML anterior.
index.js
// calling all of the Html classes
const img2 = document.querySelector('.img2')
// horizontal movement
window.addEventListener('keydown',(e)=>{
if(e.key == 'h'){
window.addEventListener('mousemove',(e)=>{
img2.style.left = e.clientX +'px'
img2.style.top = 0 +'px'
})
}
})
// vertical movement
window.addEventListener('keydown',(e)=>{
if(e.key == 'v'){
window.addEventListener('mousemove',(e)=>{
img2.style.left = 0 +'px'
img2.style.top = e.clientY +'px'
})
}
})
// default movement of slider which is horizontal movement
window.addEventListener('mousemove',(e)=>{
img2.style.left = e.clientX + 'px'
img2.scroll.top = 0 + 'px'
})
Salida: De esta manera, puedes comparar tus 2 imágenes juntas.
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA