Pratique internationale, premier effet
Bon, pas grand chose à dire, monte juste te masturber.
css :
<style> *{marge : 0;padding : 0} .wrap{ } .container{ largeur : 100 % ; débordement : caché /* hauteur : 400 px ; : 125 % ; hauteur : auto ; affichage : flex ; aligner les éléments : centre ; position : gauche : 0 ; 20 % ; float : gauche ; style de liste : aucun ; -webkit-transition : largeur 0,5 s, hauteur : 0,5 s ; position : relative ; .box li div { position : absolue ; haut : 0 ; bas : 0 ; droite : 0 ; 100 % ; hauteur : 100 % ; } /* .box li:nth-child(2){ hauteur : 360 px ; marge : 0 1 % ; } */ .goLeft, .goRight { position : largeur absolue : 28 px ; : 52px ; haut : 50 % ; transformation : traduire (0,-50 %); curseur : contour : aucun ; aucun ; hauteur de ligne : 52 px ; } .goLeft { gauche : 20 % ; } .goRight { droite : 20 % ; } .box li>p { marge : 0 ; position : absolue ; ; gauche : 50 % ; transform : traduire (-50 %, -50 %); texte-align : centre ; } .box li>p>span { affichage : bloc en ligne ; largeur : 100 px ; hauteur : 100 px ; arrière-plan : url(play.png); } .ddd{ largeur : 100 % ; affichage : flex ; aligner les éléments : centre ; position : relative ; dd-2{ largeur : 20 % ; arrière-plan : jaune ; } .aa{ largeur : 100 % ></style>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>Gauche</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({ largeur : '36%', marge : '0 2%' }) $('.box>li:nth( 1)').append('Video Theme') })$(window).resize(function () { //Lorsque la taille du navigateur change $('.box').css('height', 'auto')})function moveLeft(){ var hauteur = $('.box>li:nth(1)').height() $('.box').css('hauteur', hauteur) $( '.box>li').css({ largeur : '20%', marge : '0 0%' }) $('.box>li:nth(2)').css({ largeur : '36%', margin : '0 2%' }) $('.box').animate({ left: '-25%' }, 400, function () { // Déplacez le premier élément enfant vers Enfin, et définissez left=0 $(.box).append($('.box>li:nth(0)')[0]); $(.dd-2).append($('.aa' )( 0]); $(.aa).append('ccc'); $('.box').css('left', 0); $(.btn).attr(désactivé, faux); :nth(1)').append('Thème vidéo') }); } function moveRight(){ $('.box>li').css({ width: '20%', margin: '0 0%' }) $('.box>li:nth(0)').css({ width: '36%', margin: '0 2%' }) var height = $('.box>li: nth(1)').height() $('.box').css('hauteur', hauteur) $(.box).prepend($('.box>li:nth(3)')[0]); $('.box').css('gauche', '-20%'); '.box').animate({ gauche : 0 }, 400, function () { $(.btn).attr(disabled, false); $('.box>li:nth(1)').append('Thème vidéo') });Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.