تأثير التمرير المتقطع والسلس (تأثير التسجيل باستخدام GIF ليس جيدًا جدًا ، إذا كنت مهتمًا ، فيمكنك أسفل الرمز) ، فإن المحتوى المحدد هو كما يلي
شفرة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> seamless scroll </title> <style> *{margin: 0 ؛ padding: 0 ؛} .box {width: 500px ؛ height: 400px ؛ margin: 40px auto ؛ .block {الموضع: النسبية ؛ العرض: 500px ؛ الارتفاع: 400px ؛ فائض: مخفي ؛} .item {الارتفاع: 40px ؛ الخلفية: أحمر ؛ اللون: #fff ؛ خط النحل: 40px ؛ text-align: center ؛ وظيفة (json) {var objscroll = document.getElementByid ( OBJSCROLL.SCROLLTOP = 0 ؛ setInterval () {scrolling ()} ، 30) ؛ ClearInterval (Timer) ؛ window.onload = function () {// on: intermittent scroll/semless scroll الارتفاع: التمرير المتقطع ({on: true ، id: 'block'}) ؛ Scrollup ({id: 'block2' ، الارتفاع: 120}) ؛ } </script> </head> <body> <viv> <div id = "block"> <div> 1 seamless scroll </viv> <div> 2 seamless scroll </viv> <div> 3 seamless scroll </viv> 4 seamless scroll </viv> <div> 5 seamless scroll </file> seamlist </div> <viv> 8 تمرير سلس </div> <viv> 9 تمرير سلس </div> <div> 10 تمرير سلس </div> <div> 11 تمرير سلس </div> <div> 12 seamless scroll </viv> <div> id = "block2"> <viv> 1 intermittent scroll </viv> <viv> 1 تمرير متقطع </div> <div> 2 تمرير متقطع </div> <div> 3 تمرير متقطع </div> <div> 4 intermittent scroll </viv> <div> 5 scroll </div> التمرير </div> <viv> 8 تمرير متقطع </div> <viv> 9 تمرير متقطع </div> <div> 10 تمرير متقطع </div> <div> 11 تمرير متقطع </div> <div> 12 تمرير متقطع </div> </viv> </viv> </viv> </body> </html>ملحوظة:
1. يجب أن تكون كتلة الصندوق في التدفق والاختباء: فائض: مخفي
2. هناك وظيفتان: التمرير المتقطع/التمرير السلس
3. قم أولاً بنسخ قطعة من نفس الرمز تمامًا وتمريرها بسلاسة: يستمر مؤقت التنفيذ في زيادة قيمة scrolltop. عندما تكون قيمة scrolltop أكبر من ارتفاع المربع ، قم بتعيين ScrollTop إلى 0 وابدأ من جديد. تتم إضافة التمرير المتقطع على هذا الأساس ، ويتم تنفيذ SetTimeout بشكل متقطع ، ويتوقف الارتفاع المحدد عند وصول Scrolltop.
4. السؤال: setInterval (function () {scrolling ()} ، 30) ؛ في الكود ، يمكن تنفيذها عن طريق الكتابة بهذه الطريقة ، SetInterval ('Scrolling ()' ، 30) ؛ هذا لن يعمل. هل هناك أي توجيهات ماجستير رائعة؟ ما الفرق بين الاثنين؟ ما هي الآلية؟
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.