recherche

Maison  >  Article  >  interface Web  >  Comment utiliser natif js pour créer un effet étoilé

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

php中世界最好的语言
php中世界最好的语言original
2018-06-04 17:26:532513parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment changer la couleur d'une page en JS (tutoriel détaillé)Article suivant：Comment changer la couleur d'une page en JS (tutoriel détaillé)

Articles Liés

Voir plus