การปฏิบัติระหว่างประเทศ ผลกระทบแรก
โอเค ไม่ต้องพูดอะไรมาก แค่ขึ้นไปช่วยตัวเองก็พอ
ซีเอสเอส:
<style> *{margin: 0} .wrap{ } .container{ width: 100%; overflow: ซ่อนเร้น; /* ความสูง: 400px; */ พื้นหลัง: สีแดง; : 125%; ความสูง: อัตโนมัติ; จอแสดงผล: ดิ้น; จัดเรียงรายการ: กึ่งกลาง; ตำแหน่ง: สัมพันธ์กัน; ซ้าย: 0; 20%; float: left; list-style: none; -webkit-transition: กว้าง 0.5 วินาที, สูง 0.5 วินาที, ระยะขอบ 0.5 วินาที; .box li div { ตำแหน่ง: สัมบูรณ์; ล่าง: 0; ซ้าย: 0; } .box li div img { ความกว้าง: 100%; ความสูง: 100%; } /* .box li:nth-child(2){ ความสูง: 360px; ระยะขอบ: 0 1%; } : 52px; top: 50%; การแปลง: แปล (0,-50%); ไม่มี; ; ซ้าย: 50%; แปลง: แปล (-50%, -50%); การจัดตำแหน่งข้อความ: กึ่งกลาง; บล็อกแบบอินไลน์ ความกว้าง: 100px; ความสูง: 100px; พื้นหลัง: url(play.png); } .ddd{ ความกว้าง: 100%; 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 > <วิดีโอ></วิดีโอ> <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>ขวา</ปุ่ม> </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%', ส่วนต่าง: '0 2%' }) $('.box>li:nth( 1)').append('Video Theme') })$(window).resize(function () { //เมื่อขนาดเบราว์เซอร์เปลี่ยนแปลง $('.box').css('height', 'อัตโนมัติ')})ฟังก์ชั่น moveLeft(){ var height = $('.box>li:nth(1)').height() $('.box').css('height', height) $( '.box>li').css({ width: '20%', ส่วนต่าง: '0 0%' }) $('.box>li:nth(2)').css({ width: '36%', อัตรากำไรขั้นต้น: '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(ปิดการใช้งาน, เท็จ); $('.box>li :nth(1)').append('Video theme') }); } ฟังก์ชั่น moveRight(){ $('.box>li').css({ width: '20%', ระยะขอบ: '0 0%' }) $('.box>li:nth(0)').css({ width: '36%', ส่วนต่าง: '0 2%' }) var height = $('.box>li: nth(1)').height() $('.box').css('height', ความสูง) $(.box).prepend($('.box>li:nth(3)')[0]); $('.box').css('ซ้าย', '-20%'); $( '.box').animate({ ซ้าย: 0 }, 400, function () { $(.btn).attr(ปิดการใช้งาน, false); $('.box>li:nth(1)').append('ธีมวิดีโอ') }); }ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network