Natives JS zum Erzielen eines funkelnden Sterneneffekts
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Erzielung des Sternfunkeln-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Das Prinzip des Sternenfunkelns ist eigentlich ganz einfach:
HTML Quelltext: <body style="Hintergrund:#000"> <div id="stars_box"></div> </body> javascript - Argumente:
var stars_box=document.getElementById('stars_box'); //Element mit der ID star_box abrufenvar Obj=function(){} //Objekt erstellenObj.prototype.drawStar=function(){ //Objekt-Prototypmethode drawStar hinzufügen
var odiv = document.createElement('div'); //Div erstellen
odiv.Stil.Breite='7px';
odiv.Stil.Höhe='7px';
odiv.style.position='relative'; //Div auf relative Positionierung einstellen odiv.style.left=Math.floor(document.body.clientWidth*Math.random()) 'px'; //Der linke Wert des Div darf die Bildschirmbreite nicht überschreiten odiv.style.top=Math.floor(document.body.clientHeight*Math.random()) 'px'; //Der linke Wert des Div darf die Bildschirmhöhe nicht überschreiten odiv.style.overflow='hidden'; //Div-Überlauf auf versteckt setzen
stars_box.appendChild(odiv); //Div zum stars_box-Element hinzufügen var ostar=document.createElement('img'); //Img-Element erstellen ostar.style.width='49px';
ostar.style.height='7px';
ostar.src='Stern.png';
ostar.style.position='absolute'; //Bild auf absolute Positionierung einstellen ostar.style.top='0px';
odiv.appendChild(ostar); //Bild zu Div hinzufügen Play(ostar); //Methode zum Implementieren der blinkenden Animation Play();
}
Funktion Play(ele){
var i=Math.floor(Math.random()*7); //Um die Sterne zu unterschiedlichen Zeiten funkeln zu lassen, stelle den Zufallswert ein var timer=setInterval(function(){ //Führe die anonyme Methode alle 100ms aus if(i<7){
ele.style.left=-i*7 'px';
ich ;
}anders{
ich = 0;
}
},100);
}
//Verwenden Sie eine for-Schleife, um 30 verschiedene Objekte zu erstellen for(var i=0;i<30;i ){
var obj = neues Obj();
obj.drawStar();
}Der statische Effekt funkelnder Sterne:
Zum Schluss hängen Sie das Star-Img-Bild an:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: mysql 5.7.11 winx64 anfängliche Passwortänderung
>>: So implementieren Sie das automatische Herunterfahren von Linux bei schwacher Batterie
Artikel empfehlen
Mobile Frontend-Anpassungslösung (Zusammenfassung)
Ich habe online gesucht und festgestellt, dass in...
Docker-Overlay realisiert die Container-Kommunikation zwischen Hosts
Inhaltsverzeichnis 1. Docker-Konfiguration 2. Ers...
Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA
Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...
Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank
Normalerweise müssen die von Benutzern hochgelade...
Beispiel für die Methode „Mysql implementiert Nullwerte zuerst/letzten“
Vorwort Wir wissen bereits, dass MySQL den SQL-Be...
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
Einführung in die Verwendung gängiger XHTML-Tags
Es gibt viele Tags in XHTML, aber nur wenige werd...
Bereitstellung und Konfiguration des Apache-Dienstes unter Linux
Inhaltsverzeichnis 1 Die Rolle von Apache 2 Apach...
Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren der neuesten Version von MySQL 8.0.21
1. Herunterladen 1. Laden Sie das Installationspa...
Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64
Detailliertes Installations-Tutorial zur Dekompri...
So ändern Sie die Tomcat-Portnummer in Linux
Ich habe hier mehrere Tomcats. Wenn ich sie gleic...
Fassen Sie zusammen, wie Sie die Nginx-Leistung bei hoher Parallelität optimieren können
Inhaltsverzeichnis Merkmale Vorteile Installation...
Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0
Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...
Detaillierte Erläuterung der Kernkonzepte und Fälle von webpack-dev-server
Kernkonzepte von webpack-dev-server Webpacks Cont...
Installieren und Konfigurieren von MySQL unter Linux
System: Ubuntu 16.04LTS 1\Laden Sie mysql-5.7.18-...