suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie man JS verwendet, um einfache Falt- und Entfaltungsanimationen zu implementieren

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

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 14:42:151673Durchsuche

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>

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:

1.

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!

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：Was sind die Schritte, um den noVNC-Remotedesktop in das Vue-Projekt einzuführen?Nächster Artikel：Was sind die Schritte, um den noVNC-Remotedesktop in das Vue-Projekt einzuführen?

In Verbindung stehende Artikel

Mehr sehen