¡Todos han visto las persianas! Como se muestra en la imagen:
principio:
Como se muestra en la figura, una red hueca es como cada li. Establezca atributos de posicionamiento relativo para él y establezca desbordamiento: oculto; El bloque negro es un elemento infantil LI con una altura de 2 veces el Li, y establece el atributo absoluto. ¡Queremos cambiar su valor superior para obtener cambios! (El bloque adicional en la esquina superior derecha no tiene nada que ver con esta imagen)
Análisis de diseño:
¡Tenga en cuenta que vale la pena cambiar TOP! Cuando el TOP predeterminado = 0 es 0, se muestra el "primer piso de arriba". Cuando TOP = -40PX, los elementos infantiles de Li se mueven hasta 40 px. En este momento, el contenido que se muestra es "Primer piso abajo". Tenga en cuenta la capa de elemento p
Análisis JS:
1. Encienda múltiples temporizadores para lograr el efecto
2. Ejecutar en la dirección opuesta
3. Realizar múltiples conjuntos de ejercicios
4. La acumulación crea una sensación de asombrosa
5. Generar animación de intervalo de tiempo
El código JS es el siguiente:
<script> window.onload = function () {var oul = document.getElementById ('UL1'); var oUl2 = document.getElementById ('ul2'); toshow (oul); // ejecutar setTimeOut (function () {toshow (oUl2);}, 4000); función 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.getEntementsByClassName ('' (top: top: 0}, function () {var p = document.getegetElementsByClassName ('' '); i = 0; }}}}; // función de marco de movimiento startmove (obj, json, endfn) {clearInterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; for (var attr en json) {var icur = 0; icur = parseInt (getStyle (obj, attr)) || 0; var ispeed = (json [attr] - icur)/8; ispeed = ispeed> 0? Math.ceil (ispeed): math.floor (ispeed); if (ICUR! = JSON [ATTR]) {BBTN = FALSO; } // Obtener la función de estilo no línea getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }} </script>Dirección de descarga: js para lograr persianas
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender a realizar el efecto de las persianas JS.