Comment utiliser natif js pour créer un effet étoilé-js tutoriel-php.cn

Comment utiliser natif js pour créer un effet étoilé

php中世界最好的语言

Libérer： 2018-06-04 17:26:53

original

2461 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser du js natif pour créer un effet de ciel étoilé. Quelles sont les précautions à prendre pour utiliser du js natif pour créer un effet de ciel étoilé ?

Le code est le suivant : //Ajoutez vous-même l'image pour changer le chemin

<!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>

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux choses plus intéressantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le filtre de manière globale

Résumé de la méthode d'héritage JS (avec cas)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!