<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
#bg{
width: 100%;
height: 100%;
background: url(img/bg1.jpg)no-repeat center;
background-size: cover;
}
img{
display: block;
width: 12px;
height: 12px;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="bg"></div>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var fireBeetle = [];
for (var i=0;i<30;i++) {
fireBeetle[i] = new Firebeetle();
fireBeetle[i].posi().big().speed().show().posi().fly();
}
}
function Firebeetle(){
this.oBg = document.getElementById("bg");
this.img =document.createElement('img');
this.oBg.appendChild( this.img );
};
Firebeetle.prototype.show = function(){//显示萤火虫
this.img.src = 'img/star.jpg';
this.img.style.left = this.posiX + 'px';
this.img.style.top = this.posiY + 'px';
this.img.style.width = this.wid + 'px';
this.img.style.height = this.hei + 'px';
return this;
};
Firebeetle.prototype.randomNum = function( num ){//随机数
return Math.floor(Math.random()*num);
}
Firebeetle.prototype.posi = function(){//随机位置
this.posiX = this.randomNum( window.innerWidth - 100);
this.posiY = this.randomNum( window.innerHeight - 100);
return this;
};
Firebeetle.prototype.big = function(){//随机大小
this.wid = this.randomNum( 20 ) + 5;
this.hei = this.randomNum( 20 ) + 5;
return this;
}
Firebeetle.prototype.speed = function(){//随机速度
this.speedNum =( this.randomNum( 10 ) + 5 ) *1000;
return this;
};
Firebeetle.prototype.fly = function(){//动起来
var This = this;
this.img.move({'top':this.posiY,'left':this.posiX},this.speedNum,function(){
This.posi().speed().fly();
});
};
</script>
</body>
</html>
