He trabajado en un proyecto en los últimos días. Resultó estar hecho con animación CSS3. Debido a que es incompatible con IE, se ha cambiado a usar JS. Lo compartiré contigo para tu referencia. Si hay algún error en el código, ¡perdóname por no escribir bien!
< xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> float y top </title> <style> style type = "Text/css">. W1000 {posición: relativo; ancho: 1000px; margen: 0 auto;}. positionPub {posición: absoluto;}. PositionPub p {ancho: 50px; altura: 50px; fondo:#333; color: #ffff; line-height: 50px; text-align: centro; posición: absoluto;}. ad_float {t op: 50px; a la izquierda: 50px;}. ad_float1 {top: 150px; izquierda: 250px;}. ad_float2 {top: 250px; izquierda: 450px;} </ystye> id = "ad_float"> izquierda </p> </div> <div> <p id = "ad_float1"> derecha </p> </div> <div> <p id = "ad_float2"> no = 2; var demora = 10; var obj = document.getElementById ("ad_float"); var obj1 = document.getElementById ("ad_float1"); var obj2 = document.getElementById ("ad_float2"); function ad_float () {var l = 0; var r = 100; obj.style.left = x + x + document.documentelement.scrollleft + "px"; x = x + step * (xin? 1: -1); if (x <l) {xin = true; x = l;} if (x> r) {xin = false; x = r;}}; function ad_float1 () {var l1 = 0; var r1 = 100; obj1.Style. document.documentelement.scrollleft + "px"; x1 = x1 + step * (xin? 1: -1); if (x1 <l1) {xin = true; x1 = l1;} if (x1> r1) {xin = false; x1 = r1;}}; function ad_float2 () {var t = 0; var b = 150; obj2. + document.documentelement.scrolltop + "px"; y = y + step2 * (yin? 1: -1); if (y <t) {yin = true; y = t;} if (y> b) {yin = false; y = b;}}; var itl = setinterval ("ad_float ()", demandado); var itl1 = setInterval ("ad_float1 ()", demora); var itl2 = setInterval ("ad_float2 ()", demora); </script> </body> </html>El código termina aquí, ¡espero que sea útil para todos!