这次给大家带来怎样使用原生js做出满天星效果，使用原生js做出满天星效果的注意事项有哪些，下面就是实战案例，一起来看一下。
代码如下：//图片自己加入改变路径
<!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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
filter怎样全局使用
js的继承方法总结(附案例)
以上就是怎样使用原生js做出满天星效果的详细内容。