基于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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于JavaScript實現飄落星星特效

推薦度：

點擊下載本文 文檔為doc格式

標簽：特效星星 js

熱門焦點

基于JavaScript實現飄落星星特效

基于JavaScript實現飄落星星特效

基于JavaScript實現飄落星星特效

最新推薦

猜你喜歡

熱門推薦