基于JavaScript实现飘落星星特效

来源：懂视网责编：小OO 时间：2020-11-27 22:32:55

基于JavaScript实现飘落星星特效

本文实例为大家分享了js飘落星星特效的具体代码，供大家参考，具体内容如下：1.效果图；2.代码。<，100)；} setInterval(function () {for(var i=1；i<；5；i++){new Star().slip()；}}，1000) <；/script>；<；/head>；<；body>；<；/body>；<；/html>。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了js飘落星星特效的具体代码，供大家参考，具体内容如下：1.效果图；2.代码。<，100)；} setInterval(function () {for(var i=1；i<；5；i++){new Star().slip()；}}，1000) <；/script>；<；/head>；<；body>；<；/body>；<；/html>。

本文实例为大家分享了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.speed=10; 
 this.img=new Image(); 
 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<5;i++){ 
 new Star().slip(); 
 } 
 },1000) 
 
 </script> 
 
</head> 
 
<body> 
 
 
</body> 
</html>

基于JavaScript实现飘落星星特效

推荐度：

点击下载本文 文档为doc格式

标签：特效星星 js

热门焦点

基于JavaScript实现飘落星星特效

基于JavaScript实现飘落星星特效

基于JavaScript实现飘落星星特效

最新推荐

猜你喜欢

热门推荐