الممارسة الدولية، الأثر الأول
حسنًا، ليس هناك الكثير ليقوله، فقط اصعد واستمني.
المغلق:
<style> *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; : 125% الارتفاع: تلقائي؛ العرض: محاذاة العناصر: المركز؛ 20%؛ نمط القائمة: لا شيء؛ - انتقال webkit: العرض 0.5 ثانية، الارتفاع 0.5 ثانية؛ الموضع: نسبي؛ .box li div { الموضع: أعلى: 0؛ أسفل: 0؛ يمين: 0 } .box li div { العرض: 100%; الارتفاع: 100%; } /* .box li:nth-child(2){ height: 360px; : 52 بكسل؛ الأعلى: 50%؛ التحويل: ترجمة (0،-50%)؛ لا يوجد ارتفاع الخط: 52 بكسل؛ } .goLeft { left: 20% } .goRight { right: 20% } .box li>p { color: #fff; ; اليسار: 50%; تحويل: ترجمة(-50%,-50%); كتلة مضمنة؛ العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: url(play.png); .ddd{ العرض: 100%; dd-2{ العرض: 20% الخلفية: أصفر } .aa{ العرض: 100%;أتش تي أم أل:
<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>
شبيبة:
$(function(){ $('.box>li:nth(1)').css({ width: '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%', هامش: '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(disabled, false); :nth(1)').append('موضوع الفيديو') }); } function 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', 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.