欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

怎样使用原生js做出满天星效果

程序员文章站 2022-03-18 23:46:41
...
这次给大家带来怎样使用原生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做出满天星效果的详细内容,更多请关注其它相关文章!