تشترك الأمثلة الواردة في هذه المقالة في رمز تنفيذ تأثير التمرير السلس JS للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> seamless scroll </title> <style> #warp {width: 1200px ؛ الارتفاع: 300 بكسل ؛ الفائض: مخفي. الهامش: 100px Auto 0 ؛ } #warp #con {width: 4000px ؛ الارتفاع: 300 بكسل ؛ الفائض: مخفي. } #warp #con #box1 {float: left ؛ الفائض: مخفي. } #warp #con #box2 {float: left ؛ الفائض: مخفي. } # -warp img {float: left ؛ العرض: 200 بكسل ؛ الارتفاع: 300 بكسل ؛ } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2 <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "box2"> </viv> </div> </viv> <script> var warp = document.getElementByid ('warp') ؛ var con = document.getElementById ('con') ؛ var box1 = document.getElementById ('box1') ؛ var box2 = document.getElementById ('box2') ؛ // box2.innerhtml = box1.innerhtml ؛ var timer1 = null ، x = 0 ؛ وظيفة scroll () {// scroll function box2.innerhtml = box1.innerhtml ؛ timer1 = setInterval (function () {x ++ ؛ if (x> = box1.clientwidth) {x = 0 ؛ warp.scrollleft = x ؛} warp.scrollleft = x ؛} ، 10)} scroll () ؛ warp.onmouseenter = function () {clearinterval (timer1) ؛ } warp.onmouseLeave = function () {scroll () ؛ } </script> </body> </html>الفكرة الرئيسية لهذا التأثير هي أن عرض جزء المحتوى من الصورة يجب أن يكون أكبر بكثير من عرض المنطقة المراد عرضه ، بحيث يظهر شريط التمرير. انسخ محتوى المجموعة السابقة من الصور لجعلها سلسة التمرير في التأثير. يرجى الرجوع إلى الرمز للحصول على التفاصيل.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.