Jeder hat die Jalousien gesehen! Wie im Bild gezeigt:
Prinzip:
Wie in der Abbildung gezeigt, ist ein hohles Gitter wie jeder Li. Setzen Sie relative Positionierungsattribute dafür und setzen Sie Überlauf: versteckt; Der schwarze Block ist ein LI -Kinderelement mit einer Höhe von 2 -mal das LI und setzt das absolute Attribut. Wir wollen seinen Top -Wert ändern, um Änderungen zu erhalten! (Der zusätzliche Block in der oberen rechten Ecke hat nichts mit diesem Bild zu tun)
Layoutanalyse:
Beachten Sie, dass Top sich zu ändern lohnt! Wenn das Standard -Top = 0 ist, wird der "erste Stock im Obergeschoss" angezeigt. Bei Top = -40px werden die untergeordneten Elemente von Li auf 40px bewegt. Zu diesem Zeitpunkt ist der angezeigte Inhalt "Erster Stock im Erdgeschoss". Beachten Sie die P-Element-Schicht Div
JS -Analyse:
1. Schalten Sie mehrere Timer ein, um den Effekt zu erzielen
2. In die entgegengesetzte Richtung führen
3. Führen Sie mehrere Übungssätze durch
4. Die Akkumulation schafft ein Gefühl der erstaunlichen
5. Zeitintervallanimation generieren
Der JS -Code lautet wie folgt:
<Script> window.onload = function () {var OUl = document.getElementById ('ul1'); var Oul2 = document.getElementById ('ul2'); toShow (Oul); // setTimeout (function () {toShow (OUL2) ausführen;}, 4000); Funktion toShow (obj) {var adiv = obj.getElementsByTagName ('div'); var Inow = 0; var timer = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); function toChange(){ timer = setInterval(function(){ if(iNow==aDiv.length){ clearInterval(timer); iNow = 0; bBtn = !bBtn; } else if(bBtn){ startMove(aDiv[iNow],{top:0},function(){ var p = document.getElementsByClassName('p-2'); for(var i = 0; }}}}; // Bewegungsrahmenfunktion startMove (obj, json, endfn) {ClearInterval (obj.timer); obj.timer = setInterval (function () {var bBtn = true; für (var attr in json) {var icur = 0; icur = parseInt (getStyle (obj, attr)) || 0; var ispeed = (json [attr] - icur)/8; ispeed = isspeed> 0? icr! = json [attr]) {bBtn = false; } // Nicht-Line-Style-Funktion getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }} </script>Download -Adresse: JS, um Jalousien zu erreichen
Das Obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, die Auswirkungen von JS -Jalousien zu erkennen.