利用原生写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>
總結
以上是生活随笔為你收集整理的利用原生写js满天星星的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 教你如何给小米5续命
- 下一篇： 七十三、java版商城之买家端商品详情S