국제 관행, 첫 번째 효과
좋아, 할 말은 별로 없고, 그냥 올라가서 자위를 해라.
CSS:
<style> *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%;overflow: 숨김; /* 높이: 400px */ 배경: 빨간색; : 125%; 높이: 자동; flex-items: 중심; 왼쪽: 0; 20%; 왼쪽; 목록 스타일: 없음; -webkit-transition: 너비 0.5s, 여백 0.5s; .box video { 너비: 100%; .box li div { 위치: 절대; 하단: 0; 왼쪽: 0; 오른쪽: 0; 100%; 높이: 100%; } /* .box li:nth-child(2){ 높이: 360px; 여백: 0 1%; } */ .goLeft, .goRight { 위치: 너비: 28px; : 52px; 상단: 50%; 변환:(0,-50%); 커서: 포인터; 없음 없음; 줄 높이: 52px; } .goLeft { 오른쪽: 20%; } .box li>p { 마진: 0; 위치: 절대; ; 왼쪽: 50%; 변환: 번역(-50%,-50%); 텍스트 정렬: 중앙 } .box li>p>span { 디스플레이: 인라인 블록; 너비: 100px; 높이: 100px; } .ddd{ 너비: 100%; 높이: 360px; flex;align-items: center; dd-2{ 너비: 20%; 배경: 노란색 } .aa{ 너비: 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>왼쪽</button> <button onclick=moveLeft() class=goRight btn>오른쪽</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({ 너비: '20%', 여백: '0 0%' }) $('.box>li:nth(2)').css({ 너비: '36%', margin: '0 2%' }) $('.box').animate({ left: '-25%' }, 400, function () { // 첫 번째 하위 요소를 finally로 이동하고, 그리고 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('높이', 높이) $(.box).prepend($('.box>li:nth(3)')[0]) $('.box').css('왼쪽', '-20%'); '.box').animate({ 왼쪽: 0 }, 400, function () { $(.btn).attr(disabled, false); $('.box>li:nth(1)').append('비디오 테마') }) }위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.