cari

Rumah >hujung hadapan web >tutorial js >JavaScript如何实现飘落星星特效的实例代码详解

JavaScript如何实现飘落星星特效的实例代码详解

黄舟
黄舟asal
2017-08-10 10:33:401435semak imbas

这篇文章主要为大家详细介绍了基于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.speed=10; 
   this.img=new Image(); 
   this.img.src="img/star"+parseInt(Math.random()*4+1)+".png"; 
   this.img.style.width=50+&#39;px&#39;; 
   this.img.style.height=50+&#39;px&#39;; 
   this.img.style.top=Math.random()*window.innerHeight+1+&#39;px&#39;; 
   this.img.style.left=Math.random()*window.innerWidth+1+&#39;px&#39;; 
   document.body.appendChild(this.img); 
  } 
 
  Star.prototype.slip=function () { 
 
   var that=this; 
   function move() { 
    that.img.style.top=that.img.offsetTop+that.speed+&#39;px&#39;; 
    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>

Atas ialah kandungan terperinci JavaScript如何实现飘落星星特效的实例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：利用jQuery完成表格的增加删除和修改及设置奇偶行颜色Artikel seterusnya：JavaScript中闭包与回调的实例讲解

Artikel berkaitan

Lihat lagi