Wie man JS verwendet, um einfache Falt- und Entfaltungsanimationen zu implementieren-js-Tutorial-php.cn

Wie man JS verwendet, um einfache Falt- und Entfaltungsanimationen zu implementieren

php中世界最好的语言

Freigeben： 2018-06-01 14:42:15

Original

1648 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JS bedienen, um eine einfache Falt- und Entfaltungsanimation zu realisieren. Was sind die Vorsichtsmaßnahmen für die Bedienung von JS, um eine einfache Falt- und Entfaltungsanimation zu realisieren? Werfen wir einen Blick darauf.

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

Nach dem Login kopieren

Betriebswirkung:

Zusammenfassung:

1. CSS-Teil:

1. Vergessen Sie nicht die Referenzmethode von CSS-Dateien.
Absolute Positionierung
und relative Positionierungsbeziehungen (übergeordnete Beziehungen verwenden relativ; untergeordnete Beziehungen verwenden absolut)

2. js-Teil:

element.style.left

& element.offsetLeft Unterschied: ① Die Einheit des ersteren ist px, was eine Zeichenfolge ist; Letzteres ist ein numerischer Wert.

② Weitere Informationen finden Sie unter: http://www.jb51.net/article/43981.htm

2. und die Schlüsselvariablen des Platzierens und Bewegens der Maus wurden nicht abstrahiert – die Zielposition war einfach unterschiedlich

3 )

4. Es ist am besten, das Mausaktionsobjekt auf das übergeordnete p zu setzen, sonst kommt es zu einer Flackersituation (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 die Bewegung an der Zielposition)

3. Andere:

F: Popup-Fenster in Google Chrome 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:

So verwenden Sie DOM-Knoten in JS

So verwenden Sie JS, um Pufferbewegungen zu implementieren

Das obige ist der detaillierte Inhalt vonWie man JS verwendet, um einfache Falt- und Entfaltungsanimationen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!