Este artículo describe el efecto flotante de imagen simple implementado por JS. Compártelo para su referencia, como sigue:
Uso de objetos de ventana para lograr un efecto flotante de una imagen
1. Hay una publicidad Div que queremos controlar, su punto de partida (0,0)
2. Establezca las velocidades horizontales y verticales
3. Control AD Div Mobile
1) Si el anuncio Div alcanza el límite
2) Si llegamos al límite, establecemos la velocidad para movernos en reversa
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Title titleed Document </title> <Style> Div {Position: Absolute;} IMG {Position: Absolute; Filtro: alfa (opacidad = 100);/* ie*/-moz -opacity: 1;/* moz + ff*/opacity: 1;/* navegadores que admiten css3 (ff 1.5 también admite)*/} </style> </head> <body> <div ID = "divimg"> <img src = "123.jpg"> <iv> <scrye> "scripti) type = "text/javaScript"> // Obtener el objeto DIV donde la imagen es var img = document.getElementById ("divimg"); // Establezca las coordenadas de la esquina superior izquierda del DIV, las coordenadas del punto de partida var x = 10, y = 10; // Establecer la velocidad de viaje de la imagen var xspeed = 2, yspeed = 1; // Establezca la altura y el ancho flotantes máximos de la imagen var w = document.documentelement.clientwidth-110, h = document.documentelement.clientHeight-160; función floatimg () {// Compare si el disco de la imagen alcanza el límite // Si alcanzamos el límite, controlamos la imagen para cambiar la dirección si (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // Si no se alcanza el límite, establezca las coordenadas de la esquina superior izquierda de la imagen // Establezca el valor de coordenadas que comienza la coordenada + velocidad x + = xspeed; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // retrasar llamar a la función floatimg () y llamar a setTimeOut ("floatimg ()"), 40); } floatimg (); </script> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.