في هذه المقالة ، ندرك تأثير التمرير في وضع JS النقي.
لنعرض المنتج النهائي أولاً:
بادئ ذي بدء ، نمط صفحة الويب:
#demo {background: #fff ؛ الفائض: مخفي. الحدود: 1px متقطع #CCC ؛ العرض: 1280 بكسل ؛ الارتفاع: 200 بكسل ؛ } #demo img {border: 3px solid #f2f2f2 ؛ } #indemo {float: left ؛ العرض: 800 ٪ ؛ } #demo1 {float: left ؛ } #demo2 {float: left ؛ }التصميم كما يلي:
<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"#"#" </div> </div> </div> </div> </div> </div>
تطبيق JS محدد:
<script> var speed = 10 ؛ var tab = document.getElementById ("Demo") ؛ var tab1 = document.getElementById ("demo1") ؛ var tab2 = document.getElementById ("demo2") ؛ tab2.innerhtml = tab1.innerhtml ؛ الدالة marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetWidth else {tab.scrollleft ++ ؛ }} var mymar = setInterval (سرادق ، السرعة) ؛ tab.onmouseover = function () {clearinterval (mymar)} ؛ tab.onmouseout = function () {mymar = setInterval (marquee ، speed)} ؛ </script>ما نلاحظه هنا هو:
يمثل Scrollleft عرض الصفحة المخبأة على يسار شريط التمرير عندما تستخدم الصفحة شريط التمرير للتمرير إلى اليمين.
عرض الإزاحة هو العرض المرئي للكائن ، الذي يلف شريط التمرير ويساوي الحواف ، والتي ستتغير مع حجم عرض النافذة.
يمكن للطريقة SetInterval () استدعاء وظائف أو حساب التعبيرات وفقًا للفترات المحددة (بالميلي ثانية). ستستمر طريقة SetInterval () في استدعاء الوظيفة حتى يتم استدعاء ClearInterval () أو إغلاق النافذة.
من السهل فهم ما إذا كنت تفهم هذا التنفيذ المحدد.
مبدأ التنفيذ هو كما يلي: أولاً نسخ نسخة من المحتوى الذي يجب تمريره. عندما يكون المحتوى الذي يتم عرضه بواسطة DIV على اليمين هو نفس عرض المحتوى المخفي على الظل الأيسر ، يتم عرض المحتوى المخفي على الظل الأيسر للحاوية الأصل ، بحيث يتم عرض المحتوى المخفي على الظل الأيسر ويتم إعادة تخطيط المحتوى على اليمين. إذا كان المحتوى الموجود على الجانب الأيمن يعرض أقل من المحتوى المخفي على الجانب الأيسر ، فاستمر في التحدث عن الحاوية الأصل التي تريد الانتقال إلى اليسار لتحقيق الظل المخفي. شيء واحد يجب ملاحظة أنه نظرًا لوجود صورتين على الجانب الأيسر في نفس الوقت ، عندما يتم عرض الجانب الأيمن نصفًا ، سيتم عرض الظل المخفي على الجانب الأيسر بالكامل. نظرًا لأن المحتوى المعروض على الجانب الأيمن هو نفسه المحتوى الموجود على الجانب الأيسر ، يتم تحقيق تأثير تمرير الحلقة.
يتحقق هذا التمرير السلس.
الرمز أعلاه لتنفيذ تأثيرات التمرير السلس والسلس هو كل المحتوى الذي شاركته معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.