国際慣行、第一効果
さて、あまり言うことはありません、ただ上がってオナニーしてください。
css:
<style> *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; overflow: hidden; /* height: red; } .box{width; : 125%; 高さ: 自動; 位置: 左: 0; 20%; フロート: 左; リストスタイル: なし; -webkit-transition: 幅 0.5 秒、マージン 0.5 秒; .box ビデオ { 幅: 100%; .box li div { 位置: 上: 0; 左: 0; 右: 0; 100%; 高さ: 100%; } /* .box li:nth-child(2){ 高さ: 0 1%; } */ .goLeft, .goRight { 位置: 絶対幅: 28px; : 52px; 上部: 50%; 変換: ポインタ: なし;なし; 行の高さ: 52 ピクセル; } .goLeft { 左: 20%; } .box li>p { 色: #fff; ; 左: 50%; 変換: テキスト整列: 中央;インラインブロック; 幅: 100px; 高さ: 100px; } .ddd{ 幅: 100%; 高さ: 360px; 位置: 相対; 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({ width: '36%', margin: '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 Network をご支援いただければ幸いです。