html制作满天星,怎样使用原生js做出满天星效果

这次给大家带来怎样使用原生js做出满天星效果，使用原生js做出满天星效果的注意事项有哪些，下面就是实战案例，一起来看一下。

代码如下：//图片自己加入改变路径

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;}

//创建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();

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：