Praktek internasional, efek pertama
Oke, tidak banyak yang bisa dikatakan, langsung saja lakukan masturbasi.
css:
<style> *{margin: 0;padding: 0} .wrap{ } .container{ lebar: 100%; overflow: tersembunyi; /* tinggi: 400px; */ latar belakang: posisi: relatif; : 125%; tinggi: otomatis; tampilan: fleksibel; sejajarkan item: tengah; posisi: kiri: 0; 20%; float: kiri; gaya daftar: tidak ada; -webkit-transisi: lebar 0,5dtk, tinggi 0,5dtk, posisi: relatif; .box li div { posisi: absolut; atas: 0; bawah: 0; kiri: 0; kanan: 0; 100%; tinggi: 100%; } /* .box li:nth-child(2){ tinggi: 360 piksel; margin: 0 1%; } */ .goLeft, .goRight { posisi: lebar: 28 piksel; : 52px; atas: 50%; transformasi: terjemahan(0,-50%); tidak ada; tinggi garis: 52px; } .goLeft { kiri: 20%; } .goRight { kanan: 20%; } .box li>p { margin: 0; ; kiri: 50%; transformasi: terjemahan(-50%,-50%); perataan teks: tengah; blok sebaris; lebar: 100 piksel; tinggi: 100 piksel; latar belakang: url(play.png); dd-2{ lebar: 20%; latar belakang: kuning; } .aa{ lebar: 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>Kiri</button> <button onclick=moveLeft() class=goRight btn>kanan</button> </div> <div class=ddd> <div class=dd-2><div kelas=aa>aaa</div><div class=bb>vvvv</div></div> </div></div>
js:
$(fungsi(){ $('.box>li:nth(1)').css({ lebar: '36%', margin: '0 2%' }) $('.box>li:nth( 1)').append('Tema Video') })$(window).resize(function () { //Saat ukuran browser berubah $('.box').css('height', 'auto')})fungsi moveLeft(){ var height = $('.box>li:nth(1)').height() $('.box').css('height', height) $( '.box>li').css({ lebar: '20%', margin: '0 0%' }) $('.box>li:nth(2)').css({ lebar: '36%', margin: '0 2%' }) $('.box').animate({ left: '-25%' }, 400, function () { // Pindahkan elemen turunan pertama ke Akhirnya, dan setel kiri=0 $(.box).append($('.box>li:nth(0)')[0]); $(.dd-2).append($('.aa' )[ 0]); $(.aa).append('ccc'); $('.box').css('kiri', 0); $(.btn).attr(dinonaktifkan, salah $('.box>li :nth(1)').append('Tema video') }); } fungsi moveRight(){ $('.box>li').css({ lebar: '20%', margin: '0 0%' }) $('.box>li:nth(0)').css({ lebar: '36%', margin: '0 2%' }) var tinggi = $('.box>li: nth(1)').height() $('.box').css('height', tinggi) $(.box).prepend($('.box>li:nth(3)')[0]); $('.box').css('kiri', '-20%'); '.box').animate({ kiri: 0 }, 400, function () { $(.btn).attr(dinonaktifkan, false); $('.box>li:nth(1)').append('Tema video') });Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.