Heim > Artikel > Web-Frontend > JS realisiert den Animationseffekt von Sternschnuppen

JS realisiert den Animationseffekt von Sternschnuppen

php中世界最好的语言Original: 2018-04-19 10:33:052402Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS lässt den Warenkorb alle Umkehrfunktionen auswählenNächster Artikel：AngularJS lässt den Warenkorb alle Umkehrfunktionen auswählen

In Verbindung stehende Artikel

Mehr sehen