يحل JS محل Marquee لتحقيق التمرير السلس من الصور
ربما واجه الجميع هذا. عندما يتم تمرير الصورة في سرادق ، عندما يتم تمريرها إلى النهاية ، فإنها تقفز إلى نقطة البداية ، بدلاً من التمرير مثل النص بسلاسة. فيما يلي إدراك التمرير السلس من الصور من خلال JS.
دعونا أولاً نفهم السمات التالية:
innerhtml: تعيين أو الحصول على html في علامات البدء والطرف للكائن
Scrollheight: يحصل على ارتفاع التمرير للكائن.
التمرير: قم بتعيين أو احصل على المسافة بين الحدود اليسرى للكائن والنهاية اليسرى للمحتوى المرئي حاليًا في النافذة
Scrolltop: يضبط أو يحصل على المسافة بين الجزء العلوي من الكائن وأعلى المحتوى المرئي في النافذة
التمرير: احصل على عرض التمرير للكائن
Offsetheight: يحصل على ارتفاع الكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية الإحداثيات الإحداثي الأصل
OffsetLeft: يحصل على الموضع الأيسر المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثيات الأصل المحددة بواسطة خاصية الإزاحة
Offsettop: يحصل على الموضع الأعلى المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثيات الوالدية المحددة بواسطة خاصية Offsettop
عرض الإزاحة: يحصل على عرض الكائن بالنسبة إلى التصميم أو الإحداثيات الأصل المحددة بواسطة خاصية الإحداثيات الإحداثي الأصل.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
الصور ترفع لأعلى بسلاسة
<style type = "text/css"> <!- #demo {background: #fff ؛ overflow: hidden ؛ الحدود: 1px متقطعة #ccc ؛ الارتفاع: 100px ؛ النصوص النصية: center ؛ float: left ؛} #demo img {border: 3px solid #f2f2 ؛ direction ؛}- id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </viv> </viv> <script> <!-var speed = 10 ؛ // كلما زاد الرقم ، أبطأ علامة التبويب var speed = document.getElementByIDX_X ("demo") ؛ var tab1 = document.getElementByidx_x ("demo1") ؛ var tab2 = document.getElementByIdx_x ("demo2") ؛ tab2.innerhtml = tab1.innerhtml ؛ // clone demo1 as demo2function marquee () {if (tab2 mymar = setInterval (marquee ، السرعة) ؛ tab.onmouseover = function () {clearinterval (mymar)} ؛ // عند تحريك الماوس لأعلى ، يتم مسح المؤقت لتحقيق الغرض من تمرير التوقف عن التبويب.الصور تتجول بسلاسة لأسفل
<style type = "text/css"> <!- #demo {background: #fff ؛ overflow: hidden ؛ الحدود: 1px متقطعة #ccc ؛ الارتفاع: 100px ؛ النصوص النصية: center ؛ float: left ؛} #demo img {border: 3px solid #f2f2 ؛ direction: block ؛ id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </viv> </viv> <script> <!-var speed = 10 ؛ // كلما زاد الرقم ، أبطأ علامة التبويب var speed = document.getElementByIDX_X ("demo") ؛ var tab1 = document.getElementByidx_x ("demo1") ؛ var tab2 = document.getElementByIdx_x ("demo2") ؛ tab2.innerhtml = tab1.innerhtml ؛ // clone demo1 هو demo2tab.scrolltop = tab.scrollheightfunction marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // عند التمرير إلى تقاطع demo1 و demo2 tab.scrolltop+= tab2. mymar = setInterval (marquee ، speed) ؛ tab.onmouseover = function () {clearinterval (mymar)} ؛ // عندما يتم تحريك الماوس ، امسح الموقت لتحقيق الغرض من التمرير التوقف عن التوقف.الصور التمرير بسلاسة إلى اليسار
<type type = "text/css"> <!-#demo {background: #fff ؛ overflow: hidden ؛ الحدود: 1px متقطع #ccc ؛ width: 500px ؛}#demo img {border: 3px solid#f2f2f2 ؛} {float: left ؛}-> </style> قم بالتمرير اليسرى <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </viv> </viv> <script> <!-var speed = 10 ؛ // كلما زاد الرقم ، أبطأ علامة التبويب VAR VARE = document.getElementByIDX_X ("DEMO") ؛ var tab1 = document.getElementByIDX_X ("demo1") ؛ var tab1 = devical.getElementByIDX_X ("demo1") marquee () {if (tab2.offSetWidth-tab.Scrollleft <= 0) tab.scrollleft- = tab1.offsetWidThelse {tab.scrollleft ++ ؛ {mymar = setInterval (marquee ، السرعة)} ؛-> </script>الصور التمرير بسلاسة على اليمين
<type type = "text/css"> <!-#demo {background: #fff ؛ overflow: hidden ؛ الحدود: 1px متقطع #ccc ؛ width: 500px ؛}#demo img {border: 3px solid#f2f2f2 ؛} {float: left ؛}-> </style> التمرير الأيمن <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </viv> </viv> <script> <!-var speed = 10 ؛ // كلما زاد الرقم ، أبطأ علامة التبويب VAR VARE = document.getElementByIDX_X ("DEMO") ؛ var tab1 = document.getElementByIDX_X ("demo1") ؛ var tab1 = devical.getElementByIDX_X ("demo1") MARQUEE () {if (tab.scrollleft <= 0) tab.scrollleft+= tab2 {mymar = setInterval (marquee ، السرعة)} ؛-> </script>أخيرًا ، إذا كان شخص ما يريد أن يكون لديك مجموعتان من صور التمرير على صفحة ، واحدة إلى اليسار والآخر إلى اليمين ، فيمكن استخدام الصورة أدناه. أضفت جميع JS إلى أنا ، و CSS
انتقل إلى اليمين
<div id = "demoi"> <div id = "indemoi"> <div id = "demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </af = a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" speedi = 10 ؛ // كلما زاد الرقم ، أبطأ السرعة var tabi = document.getElementByIdx_x ("demoi") ؛ var tabi1 = document.getElementByidx_x ("demoi1") ؛ var tabi2 = document.getElementByIDX_X ("demoi2") ؛ marqueei () {if (tabi.scrollleft <= 0) tabi.scrollleft+= tabi2.offsetWidThelse {tabi.scrollleft-؛}} var mymari = setInterval (marqueei ، speedi) ؛ {mymari = setInterval (marqueei ، speedi)} ؛-> </script>المثال البسيط أعلاه من JS تحقيق التمرير المستمر دون انقطاع هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.