Home >Web Front-end >JS Tutorial >Detailed explanation of the example code of how JavaScript implements the special effect of falling stars

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

黄舟Original: 2017-08-10 10:33:401435browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery to add, delete, modify and set the color of odd and even rows in the tableNext article：Use jQuery to add, delete, modify and set the color of odd and even rows in the table

See more

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

Related articles