Este artículo describe el método de JS para lograr el efecto flotante de la imagen. Compártelo para su referencia. El análisis específico es el siguiente:
Descripción: Cuando abra la página web, verá imágenes que están constantemente flotando, haga clic para conectarse a otras páginas; ¡Tendrá un efecto clave!
Copie el código de la siguiente manera: <html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> test </title>
<style type = "text/css">
#All {ancho: 100%; Altura: 3000px;}
</style>
</ablo>
<Body>
<div id = "all">
<div id = "img" style = "Posición: Absolute; Z-Index: 99;">
<a href = "#" target = "_ en blanco"> <img src = "imágenes/opvti.jpg" style = "cursor: pointer;" style = "Cursor: Pointer;" /> </a>
<script language = "javaScript">
<!-Comienza
var xpos = document.body.clientwidth - 20;
var yPos = document.body.clientHeight / 2;
paso var = 1;
retraso var = 10;
Var altura = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pausa = verdadero;
intervalo var;
img.style.top = yPos;
función ChangePos () {
ancho = document.body.clientwidth;
altura = document.body.clientHeight;
Hoffset = img.offsetheight;
Woffset = img.OffSetWidth;
img.style.left = xPos + document.body.scrollleft;
img.style.top = yPos + document.body.scrolltop;
if (yon) {
YPOS = YPOS + paso;
} demás {
YPOS = YPOS - Paso;
}
if (yPos <0) {
yon = 1;
YPOS = 0;
}
if (yPOS> = (altura - hoffset)) {
yon = 0;
YPOS = (altura - Hoffset);
}
if (xon) {
XPOS = XPOS + Paso;
} demás {
XPOS = XPOS - Paso;
}
if (xpos <0) {
xon = 1;
XPOS = 0;
}
if (xpos> = (width - woffset)) {
xon = 0;
xPOS = (ancho - woffset);
}
}
función start () {
img.visibility = "visible";
interval = setInterval ('ChangePos ()', demora);
}
función pause_resume () {
if (pausa) {
ClearInterval (intervalo);
pausa = falso;
} demás {
interval = setInterval ('ChangePos ()', demora);
pausa = verdadero;
}
}
comenzar();
// fin ->
</script>
</div>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.