Prática internacional, primeiro efeito
Ok, não há muito a dizer, apenas suba e se masturbe.
css:
<estilo> *{margem: 0;padding: 0} .wrap{ } .container{ largura: 100%; overflow: oculto; /* altura: 400px; : 125%; altura: automático; exibição: flex; posição central: esquerda relativa: 0; 20%; float: esquerda; estilo de lista: nenhum; -webkit-transition: largura 0,5s, altura 0,5s, posição da margem: relativo; .box li div {posição: absoluto superior: 0; inferior: 0; esquerda: 0; 100%; altura: 100% } /* .box li:nth-child(2){ altura: 360px; margem: 0 1%; : 52px; topo: 50%; transformar: traduzir(0,-50%); nenhum; altura da linha: 52px; } .goLeft { esquerda: 20%; .goRight { direita: 20%; ; esquerda: 50%; transformar: traduzir(-50%,-50%); alinhamento de texto: centro; bloco embutido; largura: 100px; altura: 100px; fundo: url(play.png); dd-2{ largura: 20%; fundo: amarelo } .aa{ largura: 100%;HTML:
<div class=wrap> <div class=container> <ul class=box> <li class=video1> <video></video> <div><img src=3.jpg </li> <li class=video2 > <video></video> <div><img src=3.jpg </li> <li class=video3> <video></video> <div><img src=3.jpg </li> <li class=video4> <video></video> <div><img src=3.jpg </li> </ul> <button onclick=moveRight() class=goLeft btn>Esquerda</button> <button onclick=moveLeft() class=goRight btn>right</button> </div> <div class=ddd> <div class=dd-2><div class=aa>aaa</div><div class=bb>vvvv</div></div> </div></div>
js:
$(function(){ $('.box>li:nth(1)').css({ largura: '36%', margem: '0 2%' }) $('.box>li:nth( 1)').append('Video Theme') })$(window).resize(function () { //Quando o tamanho do navegador muda $('.box').css('height', 'auto')})function moveLeft(){ var height = $('.box>li:nth(1)').height() $('.box').css('height', height) $( '.box>li').css({ largura: '20%', margem: '0 0%' }) $('.box>li:nth(2)').css({ largura: '36%', margin: '0 2%' }) $('.box').animate({ left: '-25%' }, 400, function () { // Move o primeiro elemento filho para Finalmente, e defina left=0 $(.box).append($('.box>li:nth(0)')[0]); 0]); $(.aa).append('ccc'); $('.box').css('esquerda', 0); :nth(1)').append('Tema de vídeo') }); function moveRight(){ $('.box>li').css({ largura: '20%', margem: '0 0%' }) $('.box>li:nth(0)').css({ largura: '36%', margem: '0 2%' }) var altura = $('.box>li: nth(1)').height() $('.box').css('altura', altura) $(.box).prepend($('.box>li:nth(3)')[0]); $('.box').css('esquerda', '-20%'); '.box').animate({ left: 0 }, 400, function () { $(.btn).attr(disabled, false); $('.box>li:nth(1)').append('Tema do vídeo') });O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.