Todo mundo viu as persianas! Como mostrado na imagem:
princípio:
Como mostrado na figura, uma treliça oca é como cada li. Defina atributos de posicionamento relativo para ele e defina o excesso: oculto; O bloco preto é um elemento filho de Li com uma altura de 2 vezes o LI e define o atributo absoluto. Queremos alterar seu valor máximo para obter alterações! (O bloco extra no canto superior direito não tem nada a ver com esta imagem)
Análise de layout:
Observe que vale a pena mudar! Quando o topo padrão = 0 é 0, o "primeiro andar no andar de cima" é exibido. Quando superior = -40px, os elementos filhos de Li são movidos para 40px. Neste momento, o conteúdo exibido é "o primeiro andar no andar de baixo". Observe a camada de elementos P div
Análise JS:
1. Ligue vários temporizadores para alcançar o efeito
2. Execute na direção oposta
3. Realize vários conjuntos de exercícios
4. A acumulação cria uma sensação de impressionante
5. Gere animação de intervalo de tempo
O código JS é o seguinte:
<Script> window.onload = function () {var al = document.getElementById ('ul1'); var al2 = document.getElementById ('ul2'); Toshow (OU); // Execute setTimeout (function () {TosHow (Ol2);}, 4000); função tosHow (obj) {var adiv = obj.getElementsByTagName ('div'); var inow = 0; Var Timer = NULL; var bbtn = true; setInterval (function () {Tocange ();}, 2000); function tochange () {timer = setInterval (function () {if (inow == adiv.length) {clearInterval (timer); inow = 0; bbtn =! bbtn;} else if (bbtn) {startMove (adiv [inow], {top: 0}, functn () {var pp p. I <P.Length; }}}}; // Função do quadro de movimento StartMove (obj, json, endfn) {clearInterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; para (var att em json) {var icur = 0; icur = parseint (getStyle (obj, att)) || 0; var isEd = (json [att] - icur)/8; isPeed = isPeed> 0? Math.ceil (isPeed); icur! = JSON [att]) {bbtn = false; } // obtenha função de estilo não line getStyle (obj, att) {if (obj.currentStyle) {return obj.currentstyle [att]; } else {return getComputedStyle (obj, false) [att]; }} </script>Download Endereço: JS para obter persianas
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam a perceber o efeito das persianas do JS.