迅速构建小程序流程_基于JavaScript完成飘落星星特

阅读  ·  发布日期 2021-01-11 15:26  ·  admin
基于JavaScript实现飘落星星特效       这篇文章主要为大家详细介绍了基于JavaScript实现飘落星星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下

1.效果图

2.代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 img{ 
 position: absolute; 
 body { 
 background-image: url(img/bg.jpg); 
 background-size: 100%; 
 /style 
 script 
 function Star() { 

this.img.src="img/star"+parseInt(Math.random()*4+1)+".png"; this.img.style.width=50+'px'; this.img.style.height=50+'px'; this.img.style.top=Math.random()*window.innerHeight+1+'px'; this.img.style.left=Math.random()*window.innerWidth+1+'px'; document.body.appendChild(this.img); Star.prototype.slip=function () { var that=this; function move() { that.img.style.top=that.img.offsetTop+that.speed+'px'; console.log(that.img.offsetTop+"star"); console.log(window.innerHeight+"window"); if(that.img.offsetTop window.innerHeight){ clearInterval(sh); that.img.style.height=0; that.img.style.width=0; var sh=setInterval(move,100); setInterval(function () { for(var i=1;i i++){ new Star().slip(); },1000) /script /head body