Este artigo descreve o método do JS para alcançar o efeito flutuante da imagem. Compartilhe para sua referência. A análise específica é a seguinte:
Descrição: Ao abrir a página da web, você verá fotos que estão flutuando constantemente, clique para se conectar a outras páginas; terá um efeito chave!
Copie o código da seguinte forma: <html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Teste </ititure>
<style type = "text/css">
#All {Width: 100%; Altura: 3000px;}
</style>
</head>
<Body>
<div id = "all">
<div id = "img" style = "posição: absoluto; z-índice: 99;">
<a href = "#" Target = "_ Blank"> <img src = "imagens/opvti.jpg" style = "cursor: pointer;" style = "cursor: ponteiro;" /> </a>
<Script Language = "JavaScript">
<!-Comece
var xpos = document.body.clientWidth - 20;
var ypos = document.body.clientHeight / 2;
var stage = 1;
var a atraso = 10;
altura var = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
intervalo var;
img.style.top = ypos;
função changepos () {
largura = 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 + etapa;
} outro {
ypos = ypos - etapa;
}
if (ypos <0) {
yon = 1;
ypos = 0;
}
if (ypos> = (altura - hoffset)) {
yon = 0;
ypos = (altura - hoffset);
}
if (xon) {
xpos = xpos + etapa;
} outro {
xpos = xpos - etapa;
}
if (xpos <0) {
xon = 1;
xpos = 0;
}
if (xpos> = (largura - woffset)) {
xon = 0;
xpos = (largura - woffset);
}
}
função start () {
img.visibility = "visível";
interval = setInterval ('changepos ()', atraso);
}
function pause_resume () {
if (pausa) {
ClearInterval (intervalo);
pausa = false;
} outro {
interval = setInterval ('changepos ()', atraso);
pausa = true;
}
}
começar();
// final ->
</script>
</div>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.