يمكن رؤية تأثير التمرير السلس JS على أي صفحة ويب تقريبًا. قد يكون بعض المكونات الإضافية ، ولكن في الواقع ، فإن استخدام JavaScript الأصلي بسيط نسبيًا.
الشيء الرئيسي هو استخدام معرفة موقع JS.
1.innerhtml: تعيين أو الحصول على علامة HTML للعنصر
2.Scrollleft: قم بتعيين أو احصل على المسافة بين الحدود اليسرى للكائن والنهاية اليسرى للمحتوى المرئي حاليًا في النافذة
3.OffSetWidth: قم بتعيين أو احصل على عرض الملصق المحدد
4.SetInterval (): اضبط الطريقة للبدء بانتظام
5.clearinterval () ؛ امسح المؤقت
صورة التكاثر:
التسلل: العرض التوضيحي
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> إنتاج JavaScript Scroll </title>
</head>
<body>
<style>
/*conment*/
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
img {max-width: 100 ٪ ؛}
.حاوية{
Max-Width: 620px ؛
الهامش: 0 Auto ؛
الحشو أعلى: 50 بكسل ؛
}
.text-center {text-align: center ؛}
.list-inline li {
العرض: كتلة مضمنة.
}
.hide {display: none ؛}
HR {
الهامش: 20px 0 ؛
}
.tag {
خلفية اللون: #CCC ؛
الحشو: 5px 0 ؛
}
.tag li {
الحشو: 0 10px ؛
الحدود اليسرى: 1 بكسل الصلبة #FFF ؛
المؤشر: مؤشر.
}
.tag li: أول طفل {
اليسار الحدودي: شفاف.
}
.tag li.active {
خلفية اللون: #DDD ؛
}
.scroll {
الموقف: قريب
الحشو: 10 بكسل ؛
القاع الهامش: 20 بكسل ؛
خلفية اللون: #DDD ؛
}
.طَوّق{
الفائض: مخفي.
}
.محتوى{
Min-Width: 3000px ؛
الارتفاع: 200 بكسل ؛
}
.Content ul {
تعويم: اليسار.
}
.Content ul li {
العرض: كتلة مضمنة.
Max-Width: 200px ؛
}
#السابق ،#التالي {
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
الهامش: -25 بكسل ؛
خلفية اللون: #CCC ؛
ارتفاع الخط: 50 بكسل ؛
محاذاة النص: المركز ؛
المؤشر: مؤشر.
}
#prev {
الموقف: مطلق ؛
اليسار: 0 ؛
أعلى: 50 ٪ ؛
الحدود الراديوس: 0 25px 25px 0 ؛
}
#التالي{
الموقف: مطلق ؛
اليمين: 0 ؛
أعلى: 50 ٪ ؛
الحدود الحدودية: 25px 0 0 25px ؛
}
</style>
<viv>
<H1> صورة التمرير الإنتاج </h1>
<hr>
<viv>
<div id = "wrap">
<div id = "content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
السابق
</div>
<div id = "next">
التالي
</div>
</div>
</div>
<script>
var wrap = document.getElementById ('Wrap') ؛
var list1 = document.getElementById ('list1') ؛
var list2 = document.getElementById ('list2') ؛
var prev = document.getElementById ('prev') ؛
var next = document.getElementById ('next') ؛
// إنشاء نسخة من قائمة المحتوى
list2.innerhtml = list1.innerhtml ؛
// تغيير إلى اليسار
وظيفة Scroll () {
if (wrap.scrollleft> = list2.offsetWidth) {
WRAP.SCROLLLEFT = 0 ؛
}
آخر{
WRAP.SCROLLLEFT ++ ؛
}
}
Timer = setInterval (Scroll ، 1) ؛
// استخدم ClearInterval () لإقامة الماوس
wrap.onmouseover = function () {
ClearInterval (مؤقت) ؛
}
wrap.onmouseout = function () {
Timer = setInterval (Scroll ، 1) ؛
}
// تسريع إلى اليسار
وظيفة scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
WRAP.SCROLLLEFT = 0 ؛
}
آخر{
WRAP.SCROLLLEFT ++ ؛
}
}
// انتقل إلى اليمين
وظيفة scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.scrollleft+= list2.offsetWidth ؛
}
آخر{
wrap.scrollleft-- ؛
}
}
Prev.Onclick = function () {
ClearInterval (مؤقت) ؛
التغيير (0)
}
next.onclick = function () {
ClearInterval (مؤقت) ؛
التغيير (1)
}
تغيير الوظيفة (ص) {
if (r == 0) {
Timer = setInterval (scroll_l ، 60) ؛
wrap.onmouseout = function () {
Timer = setInterval (scroll_l ، 60) ؛
}
}
if (r == 1) {
Timer = setInterval (scroll_r ، 60) ؛
wrap.onmouseout = function () {
Timer = setInterval (scroll_r ، 60) ؛
}
}
}
</script>
</body>
رمز موجز وعملي للغاية ، يرجى تجميله وفقًا لاحتياجات مشروعك.