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
Detaillierte Erklärung der mysql.user-Benutzertabelle in Mysql
MySQL ist eine von mehreren Benutzern verwaltete ...
Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen
Inhaltsverzeichnis Benutzerdefinierte Vue-Direkti...
Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V
Derzeit nutzen die meisten Linux-Benutzer entwede...
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
Detaillierte Erklärung zum Ersetzen in ein Beispiel in MySQL
Detaillierte Erklärung zum Ersetzen in ein Beispi...
Detaillierte Erklärung der sieben Datentypen in JavaScript
Inhaltsverzeichnis Vorwort: Detaillierte Einführu...
Detaillierte Beschreibung der Unicode-Signatur-BOM
Unicode-Signatur-BOM – Was ist die BOM? BOM ist di...
SQL-Anweisungen in MySQL verwenden keine Indizes
MySQL-Abfrage ohne Verwendung der Indexaggregatio...
CentOS7-Installations-GUI-Schnittstelle und Implementierung der Remote-Verbindung
Verwenden Sie zum Crawlen von Daten die browserba...
Installieren Sie die MySQL5.5-Datenbank in einer CentOS7-Umgebung
Inhaltsverzeichnis 1. Prüfen Sie, ob MySQL auf de...
So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu
Code und Beispiele direkt posten #Schreiben Sie K...
So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz
einführen Ein Diagramm ist eine grafische Darstel...
So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest
In einer ungeordneten Liste ul>li ist das Symb...
Lösungen für MySQL OOM (Speicherüberlauf)
OOM steht für „Out Of Memory“, was so viel bedeut...
Von VirtualBox erstellte virtuelle Debian-Maschine teilt Dateien mit dem Windows-Host
der Begriff: 1. VM: Virtuelle Maschine Schritt: 1...