เมื่อต้องจัดการกับการเลื่อนข่าวบนหน้าเป็นระยะ ๆ อย่างราบรื่น วิธีการที่พบบ่อยที่สุดคือการคัดลอกและต่อท้ายเนื้อหาของพื้นที่การเลื่อน จากนั้นควบคุมและตัดสิน scrollTop ของบล็อกการเลื่อนเพื่อให้ได้เอฟเฟกต์การหยุดการเลื่อน
ในความเป็นจริง ในหลายกรณี การเลื่อนดูการทำงานของโหนดเป็นระยะๆ อย่างราบรื่นจะง่ายกว่า
รหัสมีดังนี้:
<script language="javascript" type="text/javascript">
window.onload=ฟังก์ชั่น(){
var o=document.getElementById('กล่อง');
window.setInterval(function(){scrollup(o,24,0);},3000);
-
/// เลื่อนวิธีการหลัก
///พารามิเตอร์:o วัตถุบล็อกเลื่อน
///พารามิเตอร์: d ความสูงของแต่ละสกรอลล์
///พารามิเตอร์: c ความสูงของการเลื่อนปัจจุบัน
ฟังก์ชั่นเลื่อนขึ้น (o, d, c) {
ถ้า(d==c){
var t=getFirstChild(o.firstChild).cloneNode(จริง);
o.removeChild(getFirstChild(o.firstChild));
o.ผนวกเด็ก(t);
t.style.marginTop="0px";
}อื่น{
ค+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
-
-
//แก้ไขปัญหาที่ช่องว่างและการขึ้นบรรทัดใหม่จะถูกใช้เป็นโหนดใน Firefox
ฟังก์ชั่น getFirstChild (โหนด) {
ในขณะที่ (node.nodeType!=1)
-
โหนด=node.nextพี่น้อง;
-
โหนดส่งคืน;
-
</สคริปต์>
<ul id="กล่อง">
<li>· Xinhua Daily Telegraph: ค่าธรรมเนียมลิขสิทธิ์เพลงเปรียบเสมือน "ลูกบอลกัญชา" </li>
<li>· Modern Express: มนุษย์สามารถแต่งงานกับหุ่นยนต์และมีลูกได้หรือไม่ </li>
<li>·ทั่วโลก: อเมริกา การล้มละลายของสโมสรมหาเศรษฐี</li>
<li>· Modern Express: เพื่อปิดปาก Ni Zhen จากสื่อ เขาต้องการขายจดหมายรักของ Li Jiaxin</li>
<li>· Beijing Times: จรวดที่สร้างขึ้นเองของนักศึกษาวิชาการบินและอวกาศแห่งมหาวิทยาลัยปักกิ่งขึ้นสู่ท้องฟ้า</li>
</ul>
ผล:
เรียกใช้โค้ด
<style type="text/css">
-
*{ ระยะขอบ:0px; การขยาย:0px;}
#box{width:300px; height:24px;overflow:hidden; ขนาดตัวอักษร:12px;
#box li { รายการสไตล์: ไม่มี; ความสูงบรรทัด: 24px;}
-
</สไตล์>
<script language="javascript" type="text/javascript">
window.onload=ฟังก์ชั่น(){
var o=document.getElementById('กล่อง');
window.setInterval(function(){scrollup(o,24,0);},3000);
-
ฟังก์ชั่นเลื่อนขึ้น (o, d, c) {
ถ้า(d==c){
var t=getFirstChild(o.firstChild).cloneNode(จริง);
o.removeChild(getFirstChild(o.firstChild));
o.ผนวกเด็ก(t);
t.style.marginTop="0px";
}อื่น{
ค+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
-
-
ฟังก์ชั่น getFirstChild (โหนด) {
ในขณะที่ (node.nodeType!=1)
-
โหนด=node.nextพี่น้อง;
-
โหนดส่งคืน;
-
</สคริปต์>
<ul id="กล่อง">
<li>· Xinhua Daily Telegraph: ค่าธรรมเนียมลิขสิทธิ์เพลงเปรียบเสมือน "ลูกบอลกัญชา" </li>
<li>· Modern Express: มนุษย์สามารถแต่งงานกับหุ่นยนต์และมีลูกได้หรือไม่ </li>
<li>·ทั่วโลก: อเมริกา การล้มละลายของสโมสรมหาเศรษฐี</li>
<li>· Modern Express: เพื่อปิดปาก Ni Zhen จากสื่อ เขาต้องการขายจดหมายรักของ Li Jiaxin</li>
<li>· Beijing Times: จรวดที่สร้างขึ้นเองของนักศึกษามหาวิทยาลัยการบินและอวกาศแห่งปักกิ่งขึ้นสู่ท้องฟ้า</li>
</ul>