Международная практика, первый эффект
Ладно, особо нечего говорить, просто подойди и помастурбируй.
CSS:
<style> *{margin: 0;padding: 0} .wrap{ } .container{ ширина: 100%; переполнение: скрыто; /* высота: 400 пикселей; */ фон: красный; положение: относительное; : 125%; высота: авто; отображение: flex; выравнивание элементов: по центру; позиция: относительно; } .box li { ширина: 20%; float: left; list-style: none; -webkit-transition: ширина 0,5 с, высота 0,5 с; позиция: относительная; } .box video { ширина: 100%; высота: 100%; .box li div { позиция: абсолютное; верхнее: 0; левое: 0; правое: 0; .box li div img { ширина: 100%; высота: 100% } /* .box li:nth-child(2){ высота: 360 пикселей; поле: 0 1% } */ .goLeft, .goRight { позиция: абсолютная; ширина: 28 пикселей; : 52 пикселей; верх: 50%; преобразование: перевод (0,-50%); курсор: указатель; граница: нет; ни одна высота строки: 52 пикселя } .goLeft { слева: 20% } .goRight { справа: 20% } .box li>p { маржа: 0; цвет: #fff позиция: абсолютная; ; влево: 50%; Transform: Translate(-50%,-50%); text-align: center } .box li>p>span { display: встроенный блок; высота: 100 пикселей; фон: url (play.png); } .ddd { ширина: 100%; высота: 360 пикселей; дисплей: flex; align-items: center; dd-2{ ширина: 20%; фон: желтый } .aa{ ширина: 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>Влево</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({ ширина: '36%', поле: '0 2%' }) $('.box>li:nth( 1)').append('Тема видео') })$(window).resize(function () { //При изменении размера браузера $('.box').css('height', 'auto')})function moveLeft(){ var height = $('.box>li:nth(1)').height() $('.box').css('height', height) $( '.box>li').css({ width: '20%', Margin: '0 0%' }) $('.box>li:nth(2)').css({ width: '36%', Margin: '0 2%' }) $('.box').animate({ left: '-25%' }, 400, function () { // Перемещаем первый дочерний элемент в Наконец, и установите left=0 $(.box).append($('.box>li:nth(0)')[0]); $(.dd-2).append($('.aa' )[ 0]); $(.aa).append('ccc'); $('.box').css('left', 0); $(.btn).attr(отключено, false); :nth(1)').append('Тема видео') }); } 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('height', height) $(.box).prepend($('.box>li:nth(3)')[0]); $('.box').css('left', '-20%'); $( '.box').animate({ left: 0 }, 400, function () { $(.btn).attr(disabled, false); $('.box>li:nth(1)').append('Тема видео') });
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.