Este artigo descreve o efeito flutuante de imagem simples implementado pelo JS. Compartilhe -o para sua referência, como segue:
Usando objetos de janela para obter um efeito flutuante de uma imagem
1. Há uma div publicitário que queremos controlar, seu ponto de partida (0,0)
2. Defina as velocidades horizontais e verticais
3. Controle Ad Div Mobile
1) se a div, atinge o limite
2) Se atingirmos o limite, definimos a velocidade para mover -se em marcha à ré
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt Titled Document </title> <estilo> div { filtro: alfa (opacidade = 100);/* ie*/-moz -opacity: 1;/* moz + ff*/opacidade: 1;/* navegadores que suportam css3 (ff 1.5 também suporta)*/} </style> </head> <body> <divd = "divimg"> <img src = 1210 </flet> <body> <divi) <img " type = "text/javascript"> // Obtenha o objeto Div onde a imagem é var iMg = document.getElementById ("divimg"); // Defina as coordenadas do canto superior esquerdo da div, as coordenadas do ponto de partida var x = 10, y = 10; // Defina a velocidade de viagem da imagem var xspeed = 2, yspeed = 1; // Defina a altura flutuante máxima e a largura da imagem var w = document.documentElement.clientWidth-110, h = document.documentElement.clientHeight-160; function floatImg () {// Compare se o disco da imagem atinge o limite // se atingirmos o limite, controlamos a imagem para alterar a direção se (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // Se o limite não for atingido, defina as coordenadas do canto superior esquerdo da figura // Defina o valor da coordenada Coordenada de partida + velocidade x + = xSpeed; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // atraso, ligue para a função floatImg (), e Chall 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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.