التمرير السلس هو تأثير خاص غالبًا ما يستخدم في المشاريع. هناك أيضًا العديد من رموز العينة على الإنترنت. أنا هنا أشارككم رمزًا بسيطًا وعمليًا نسبيًا مع توافق جيد. الرجاء دراستها بعناية.
رمز HTML:
نسخة الكود كما يلي:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> title> Seamless Scroll </ </span> title>
<</span> script src = "js/0010.js"> </ </span> script>
<</span> link rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</</span> الرأس>
<</span> body>
<</span> a href = "javaScript:"> المشي يسار </</span> a>
<</span> a href = "javaScript:"> المشي يمينًا <//span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "image/1.jpg"> </ </span> li>
<</span> li> <</span> img src = "image/2.jpg"> </ </span> li>
<</span> li> <</span> img src = "image/3.jpg"> </ </span> li>
<</span> li> <</span> img src = "image/4.jpg"> </ </span> li>
</</span> ul>
</</span> div>
</</span> الجسم>
</</span> html>
رمز CSS
نسخة الكود كما يلي:
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
#div1 {
الفائض: مخفي.
الخلفية: الأزرق.
الموقف: قريب
العرض: 600 بكسل ؛
الارتفاع: 150 بكسل ؛
الهامش: 100px Auto ؛
}
#div1 ul {
الموقف: مطلق ؛
اليسار: 0px ؛
أعلى: 0px ؛
على غرار القائمة: لا شيء ؛
}
#div1 ul li {
تعويم: اليسار.
}
#div1 ul li img {
العرض: 150 بكسل ؛
الارتفاع: 150 بكسل ؛
}
JS: رمز
نسخة الكود كما يلي:
window.onload = function () {
var odiv = document.getElementById ('div1') ؛
var oul = odiv.getElementSbyTagName ('ul') [0] ؛
var ali = oul.getElementsByTagname ('li') ؛
var timer = null ؛
var speed = 2 ؛ // التحكم في سرعة التمرير والاتجاه
oul.innerhtml = oul.innerhtml+oul.innerhtml ؛
oul.style.width = ali [0] .offSetWidth*ali.length+'px' ؛
Timer = setInterval (Move ، 30) ؛
odiv.onmouseover = function () {// الماوس في مؤقت
ClearInterval (مؤقت) ؛
} ؛
Odiv.Onmouseout = function () {// mouse out and stite iltling
Timer = setInterval (Move ، 30) ؛
}
document.getElementsByTagName ('A') [0] .Onclick = function () {
السرعة = -2 ؛
}
document.getElementsByTagName ('a') [1] .Onclick = function () {
السرعة = 2 ؛
}
وظيفة نقل () {// صورة التمرير
if (oul.offsetleft <-oul.offsetwidth/2) {
oul.style.left = 0 ؛
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth/2+'px' ؛
}
oul.style.left = oul.offsetleft+speed+'px' ؛
}
}
أليس التأثير جيدًا جدًا؟