So erstellen Sie mit nativem JS einen Sternenhimmeleffekt-js-Tutorial-php.cn

So erstellen Sie mit nativem JS einen Sternenhimmeleffekt

php中世界最好的语言

Freigeben： 2018-06-04 17:26:53

Original

2498 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!