JS realisiert den Animationseffekt von Sternschnuppen-js-Tutorial-php.cn

JS realisiert den Animationseffekt von Sternschnuppen

php中世界最好的语言

Freigeben： 2018-04-19 10:33:05

Original

2408 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen JS, um den Sternschnuppen-Animationseffekt zu realisieren. Was sind die Vorsichtsmaßnahmen für JS, um den Sternschnuppen-Animationseffekt zu realisieren? ein Blick.

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="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>
<body>
</body>
</html>

Nach dem Login kopieren

Empfohlene Lektüre:

JS-Implementierung der Datenvalidierung und Übermittlung von Kontrollkästchenformularen

vue.js bidirektionale Bindungsverwendung Ausführliche Erklärung

JS zur einfachen Implementierung von Karussellbildern

Das obige ist der detaillierte Inhalt vonJS realisiert den Animationseffekt von Sternschnuppen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!