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!
