suchen

Heim  >  Artikel  >  Web-Frontend  >  JS erstellt Falt- und Entfaltungsanimationen (mit Code)

JS erstellt Falt- und Entfaltungsanimationen (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-05-14 14:38:142613Durchsuche

Dieses Mal bringe ich Ihnen JS mit, um eine Falt- und Entfaltungsanimation (mit Code) zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Falt- und Entfaltungsanimation mit JS (mit Code). Praktischer Fall, schauen wir uns das einmal an. 

<!DOCTYPE = html>
<html>
 <head>
  <title> JS折叠展开动画</title>
  <style>
  body{
   margin: 0px;
   padding: 0px;
  }
  .red{
   background-color:red;
   width:200px;
   height:200px;
   position:relative;
   left:-200px;
   top:0px;
  }
  .blue{
   background:blue;
   width:20px;
   height:50px;
   position:absolute;
   left:200px;
   top:75px;
  }
  </style>
 </head>
 <body>
  <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
  <script>
  window.onload = function(){
   var onp = document.getElementById("cf1");
   onp.onmouseover = function(){
    startmove(0);
   }
   onp.onmouseout = function(){
    startmove(-200);
   }
  }
  var timer ;
  function startmove(target){
   clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
   var onp1 = document.getElementById("cf1");
   timer = setInterval(function(){
   var speed = 0;
   if(onp1.offsetLeft<target){
    speed = 10;
   }else{
    speed = -10;
   }
   if(onp1.offsetLeft==target){
    clearInterval(timer);
   }
   else{
   onp1.style.left = onp1.offsetLeft+speed+&#39;px&#39;;
   }
   },30)
  }
  </script>
 </body>
</html>


Zusammenfassung:

1. CSS-Teil:

1. Vergessen Sie nicht, den Stil zu initialisieren.
2. Überprüfen Sie die
absolute Positionierung (Übergeordnete Beziehungen verwenden relativ; untergeordnete Beziehungen verwenden absolut)

2. js-Teil:

1,

element.style.left & element.offsetLeft Unterschied:

① Die Einheit des ersteren ist px, die Einheit des letzteren ist eine Zahl Wert;


2. Idee Es war zunächst nicht klar genug und es gelang nicht, die Schlüsselvariablen des Platzierens und Bewegens der Maus zu abstrahieren – die Zielposition ist einfach anders

3 🎜>Funktionsparameter

so wenig wie möglich (sofern das Ziel erreicht werden kann) 4. Am besten ist es, das Mausaktionsobjekt auf das übergeordnete p zu setzen, sonst kommt es zu Flackern (

onmouseover

wurde gerade aufgerufen, das Ziel wurde entfernt und onmouseout wurde erneut aufgerufen) 5. Achten Sie darauf, den Timer zu löschen (①, um eine instabile Geschwindigkeit beim Bewegen zu verhindern ②, stoppen Sie Bewegen an der Zielposition)

3. Andere:

F: Kann Google Chrome Popup-Fenster entsperren?

A: Einstellungen – Erweiterte Einstellungen – Datenschutzeinstellungen – Inhaltseinstellungen – Popup-Fenster zum Vornehmen relevanter Einstellungen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue+vue-router+vuex-Betriebsberechtigungen


V-Bind- und V-On-Nutzung Ausführliche Erläuterung des Falles

Das obige ist der detaillierte Inhalt vonJS erstellt Falt- und Entfaltungsanimationen (mit Code). 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：JS implementiert die TransparenzgradientenfunktionNächster Artikel：JS implementiert die Transparenzgradientenfunktion

In Verbindung stehende Artikel

Mehr sehen