Dieser Artikel beschreibt den von JS implementierten einfachen Image -Floating -Effekt. Teilen Sie es für Ihre Referenz wie folgt weiter:
Verwenden von Fensterobjekten, um einen schwimmenden Effekt eines Bildes zu erzielen
1. Es gibt eine Werbediv, die wir kontrollieren wollen, seinen Ausgangspunkt (0,0)
2. Stellen Sie die horizontalen und vertikalen Geschwindigkeiten ein
3.. Steuerungs -AD -DIV -Mobile steuern
1) ob die AD Div die Grenze erreicht
2) Wenn wir die Grenze erreichen, setzen wir die Geschwindigkeit, um uns umgekehrt zu bewegen
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unauftitelte Dokument </title> <style> div {position: Absolut: Absolut: Absolut: Absolut: Absolut: filter:alpha(opacity=100);/* IE */ -moz-opacity:1;/* Moz + FF */ opacity: 1;/* Browsers that support CSS3 (FF 1.5 also supports)*/}</style></head><body><div id="divimg"><img src="123.jpg"></div><script language="JavaScript" type = "text/javaScript"> // das Div -Objekt abrufen, in dem das Bild var img = document.getElementById ("Divimg") ist; // Setzen Sie die Koordinaten der oberen linken Ecke des DIV, die Koordinaten des Startpunkts var x = 10, y = 10; // Setzen Sie die Reisegeschwindigkeit des Bildes var xspeed = 2, yspeed = 1; // Setzen Sie die maximale Schwimmhöhe und Breite des Bildes var w = document.documentElement.clientwidth-110, h = document.documentElement.clientHeight-160; Funktion floatimg () {// Vergleichen Sie, ob die Bildscheibe die Grenze erreicht // Wenn wir die Grenze erreichen, steuern wir das Bild, um die Richtung zu ändern, wenn (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // Wenn die Grenze nicht erreicht ist, setzen Sie die Koordinaten der oberen linken Ecke des Bildes // den Koordinatenwert Startkoordinate + Geschwindigkeit x + = xspeed fest; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // Zögern Sie die Funktion floatimg () und rufen Sie setTimeout ("floatimg ()"), 40); } floatimg (); </script> </body> </html>Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.