Tout le monde a vu les stores! Comme indiqué dans l'image:
principe:
Comme le montre la figure, un réseau creux est comme chaque li. Définissez des attributs de positionnement relatifs pour lui et définissez le débordement: caché; Le bloc noir est un élément enfant Li avec une hauteur de 2 fois le Li et définir l'attribut absolu. Nous voulons modifier sa valeur maximale pour obtenir des modifications! (Le bloc supplémentaire dans le coin supérieur droit n'a rien à voir avec cette image)
Analyse de la disposition:
Notez que le haut vaut la peine de changer! Lorsque le haut par défaut = 0 est 0, le "premier étage à l'étage" s'affiche. Lorsque le haut = -40px, les éléments enfants de Li sont déplacés jusqu'à 40px. À l'heure actuelle, le contenu affiché est "premier étage en bas". Notez la couche de la couche d'élément p
Analyse JS:
1. Allumez plusieurs minuteries pour réaliser l'effet
2. Exécuter dans la direction opposée
3. Effectuez plusieurs ensembles d'exercices
4. L'accumulation crée un sentiment de stupéfiant
5. Générer une animation d'intervalle de temps
Le code JS est le suivant:
<script> window.onload = function () {var oul = document.getElementById ('ul1'); var oul2 = document.getElementById ('ul2'); Toshow (oul); // exécuter setTimeout (function () {toShow (oul2);}, 4000); fonction toshow (obj) {var adiv = obj.getElementsByTagName ('div'); var inow = 0; var timer = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); fonction 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.getElelementsByClassname ('P-2'); I = 0; }}}}; // Fonction de trame de mouvement startMove (obj, json, endfn) {ClearInterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; for (var atr in json) {var icur = 0; icur = parseInt (getStyle (obj, att)) || 0; var ispeed = (json [att] - icur) / 8; ispeed = ispeed> 0? Math.ceil (ispeed): math.floor (ispeed); if (icur! = json [att]) {bbtn = false;} obj.style [att] = icur + iSpeed + 'px'; } // Obtenez une fonction de style non linéaire getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [att]; } else {return getCompuledStyle (obj, false) [att]; }} </ script>Télécharger l'adresse: js pour réaliser des stores
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre à réaliser l'effet des stores JS.