Ich habe in den letzten Tagen an einem Projekt gearbeitet. Es stellte sich heraus, dass es mit CSS3 -Animation hergestellt wurde. Da es mit dem IE nicht kompatibel ist, wurde es in die Verwendung von JS geändert. Ich werde es mit Ihnen für Ihre Referenz teilen. Wenn der Code irgendwelche Fehler enthält, verzeihen Sie mir bitte, dass Sie nicht gut geschrieben haben!
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml" xml: Lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titels> links und titis> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> </title> type = "text/CSS">. W1000 {Position: relativ; Breite: 1000px; Rand: 0 Auto;}. PositionPub {Position: Absolute;}. PositionPub P {Breite: 50px; Höhe: 50px; Hintergrund:#333; Farbe: #ffff; Zeilenhöhe: 50px; Text-Align: Mitte; Position: Absolute;}. ad_float {t op: 50px; links: 50px;}. ad_float1 {top: 150px; links: 250px;}. ad_float2 {top: 250px; links: 450px;} </style> </head> <body> <div> <div> <p id = "ad_float"> links </p> </div> <div> <p id = "ad_float1"> rechts </p> </div> <div> <p id = "ad_float2"> down </p> </div> </div> <skript type = "text/javaScript"> var x = 0, y = 0, x1 = 0, x1 = 0; 2; var delay = 10; var obj = document.getElementById ("ad_float"); var obj1 = document.getElementById ("ad_float1"); var obj2 = document.getElementById ("ad_float2"); Funktion ad_float () {var l = 0; "px"; x = x + Schritt * (xin? 1: -1); if (x <l) {xin = true; x = l;} if (x> r) {xin = false; x = r;}}; Funktion ad_float1 () {var l1 = 0; var r1 = 100; OBJ1.Stylle.left = x1 + document.documentel.dyleft + x1 + document. "px"; x1 = x1 + Schritt * (xin? 1: -1); if (x1 <l1) {xin = true; x1 = l1;} if (x1> r1) {xin = false; x1 = r1;}}; + "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()", delay);var itl1 = setInterval("ad_Float1()", delay);var itl2 = setInterval ("ad_float2 ()", delay); </script> </body> </html>Der Code endet hier, ich hoffe, es wird für alle hilfreich sein!