suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit nativem JS einen Sternenhimmeleffekt

So erstellen Sie mit nativem JS einen Sternenhimmeleffekt

php中世界最好的语言
php中世界最好的语言Original
2018-06-04 17:26:532516Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit nativem js einen Sternenhimmeleffekt erzeugen. Welche Vorsichtsmaßnahmen gibt es für die Verwendung von nativem js, um einen Sternenhimmeleffekt zu erzeugen?

Der Code lautet wie folgt: //Fügen Sie das Bild selbst hinzu, um den Pfad zu ändern


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{height: 100%;}
body{background: url(img/bg.jpg) no-repeat center top/cover;margin: 0;margin: 0;height: 100%;} 
//图片路径修改处
img{width: 20px;position: absolute;}
</style>
</head>
<body>
<script type="text/javascript">
//创建img
function FireWorm(){
this.node=document.createElement("img");
this.node.src="img/1.jpg";  //图片路径修改处
}
//确定img的位置
FireWorm.prototype.getpos=function(){
var Cw=document.documentElement.clientWidth;
var Ch=document.documentElement.clientHeight;
this.Left=Math.floor(Cw*Math.random()-50);
this.Top=Math.floor(Ch*Math.random()-50);
}
//显示img位置
FireWorm.prototype.showpos=function(){
this.getpos();
this.node.style.left=this.Left+"px";
this.node.style.top=this.Top+"px";
document.body.appendChild(this.node);
}
//让img飞
FireWorm.prototype.fly=function(){
this.getpos();
var _this=this;
startMove(this.node,{left:this.Left,top:this.Top},function(){
_this.fly();
})
}
for(var i=0;i<300;i++){
var oFireWorm =new FireWorm();
oFireWorm.showpos();
oFireWorm.fly();
}</script>
</body>
</html>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall gelesen haben Weitere spannende Dinge finden Sie in diesem Artikel. PHP Chinesisch Andere verwandte Artikel online!

Empfohlene Lektüre:

So verwenden Sie den Filter global

Zusammenfassung der JS-Vererbungsmethode (mit Groß-/Kleinschreibung)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit nativem JS einen Sternenhimmeleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So ändern Sie die Seitenfarbe in JS (ausführliches Tutorial)Nächster Artikel：So ändern Sie die Seitenfarbe in JS (ausführliches Tutorial)

In Verbindung stehende Artikel

Mehr sehen