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
Wer ist ein User Experience Designer?
Beängstigend, nicht wahr? Übersetzung im Bild: (v...
Detailliertes Beispiel für die Verwendung einer asynchronen JS-Fetch-Anforderung
Inhaltsverzeichnis Asynchronität verstehen abrufe...
CocosCreator Typescript macht Tetris-Spiel
Inhaltsverzeichnis 1. Einleitung 2. Mehrere wicht...
Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL
0. Bereiten Sie relevante Tabellen für die folgen...
Schritte zum Bereitstellen mehrerer Tomcat-Dienste mithilfe von DockerFile im Docker-Container
1. [admin@JD ~]$ cd opt #Geben Sie opt im Stammve...
Dreißig HTML-Codierungsrichtlinien für Anfänger
1. HTML-Tags immer schließen Im Quellcode der vor...
Manuelle Implementierung der Instanceof-Methode in JavaScript
1. Verwendung von instanceof Mit instanceof wird ...
Ein Beispiel für die Ausführungsreihenfolge zwischen dem href-Sprung und dem onclick des HTML-Hyperlinks a-Tag
Die Ausführungsbeziehung zwischen dem href-Sprung...
idea verwendet Docker-Plugin, um automatisierte Bereitstellung mit einem Klick zu erreichen
Inhaltsverzeichnis Umfeld: 1. Docker ermöglicht d...
MySQL 5.6 Installationsschritte mit Bildern und Text
MySQL ist ein Open-Source-Verwaltungssystem für k...
Beispiel für die Kompilierung von LNMP im Docker-Container
Inhaltsverzeichnis 1. Projektbeschreibung 2. Ngin...
Probleme mit Vue, das die Homepage von Bibibili imitiert
Technische Struktur Das Projekt ist in zwei Teile...
Vergleich der Vorteile von vue3 und vue2
Inhaltsverzeichnis Vorteil 1: Optimierung des Dif...
Lösen Sie das Problem des hässlichen blauen Rahmens nach dem Hinzufügen eines Hyperlinks zum HTML-Bild img
HTML-Bild erzeugt nach dem Hinzufügen eines Hyper...
Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS
Die Titelbilder in den Spalten von Zhihu Discover...