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
So überwachen Sie Tomcat mit LambdaProbe
Einführung: Lambda Probe (früher bekannt als Tomc...
Beispielcode mit SCSS in Uni-App
Aufgetroffene Fallstricke Ich habe den ganzen Nac...
So verwenden Sie Axios, um Netzwerkanforderungen in React Native zu stellen
In der Front-End-Entwicklung gibt es viele Möglic...
MySQL implementiert Multi-Table-Assoziationsstatistiken (Unterabfragestatistiken) Beispiel
Dieser Artikel beschreibt anhand eines Beispiels ...
Lösung für großen Zeilenabstand (5 Pixel mehr im IE)
Code kopieren Der Code lautet wie folgt: li {Brei...
Installieren Sie mysql5.7.10 manuell unter Ubuntu
Dieses Tutorial beschreibt den Prozess der manuel...
Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode
Inhaltsverzeichnis Vorbereiten Fünf Waffen für … ...
Einführung in Linux und die am häufigsten verwendeten Befehle (leicht zu erlernen, kann aber mehr als 95 % der Probleme lösen)
Linux ist derzeit das am weitesten verbreitete Se...
Designtheorie: Menschenorientiertes Designkonzept
<br />Als sich das Denken in Ost und West sp...
Detaillierte Erläuterung der Startreihenfolge des Docker-Containers mithilfe eines Shell-Skripts
1. Aufgetretene Probleme Bei der verteilten Proje...
Anfänger lernen einige HTML-Tags (3)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
Lebenszyklus und Hook-Funktionen in Vue
Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....
Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren
Hinweis: Sie können keine bereichsbezogenen Anima...
Lösen Sie das MySQL-Problem: Die Codeausführung kann nicht fortgesetzt werden, da MSVCR120.dll nicht gefunden wurde
1. Problem Die bei der Initialisierung von MySQL ...
Analysieren Sie die Kompilierung und das Brennen des Linux-Kernels und des Gerätebaums
Inhaltsverzeichnis 1. Materialien vorbereiten 2. ...