Detailed explanation of the example code of how JavaScript implements the special effect of falling stars-JS Tutorial-php.cn

Detailed explanation of the example code of how JavaScript implements the special effect of falling stars

黄舟

Release： 2017-08-10 10:33:40

Original

1354 people have browsed it

This article mainly introduces the implementation of the falling star special effect based on JavaScript in detail. It has a certain reference value. Interested friends can refer to it.

The example in this article shares with everyone the js falling star special effect. The specific code is for your reference. The specific content is as follows

1. Rendering

2. Code

<!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>

Copy after login

The above is the detailed content of Detailed explanation of the example code of how JavaScript implements the special effect of falling stars. For more information, please follow other related articles on the PHP Chinese website!