快捷導(dǎo)航

javascript 實現(xiàn)滾動效果代碼整理

更新時間：2010年03月18日 21:09:21 作者：

javascript 實現(xiàn)滾動效果代碼整理，需要的朋友可以參考下。

1.先寫兩個最常用最簡潔的滾動代碼
代碼如下：
水平滾動：
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滾動字幕內(nèi)容</marquee>
垂直滾動：
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滾動字內(nèi)容</marquee>
2.平穩(wěn)不間斷滾動

復(fù)制代碼代碼如下:

 
<SCRIPT LANGUAGE="JavaScript"> 
var tm=null 
function newsScroll() { 
var scrollimg=document.getElementById("scroll") 
if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2)) 
scrollimg.parentNode.scrollTop++; 
else 
scrollimg.parentNode.scrollTop=0 
} 
window.onload=function() { 
tm=setInterval('newsScroll()',25) 
} 
function stop() 
{ 
clearInterval(tm) 
} 
function start() 
{ 
tm=setInterval('newsScroll()',25) 
} 
</SCRIPT> 
/* stop() start() 不能和調(diào)用ID在同一個容器內(nèi)， 如容器沒默認(rèn)高度 要制定高度*/ 

3 有停留滾動
代碼示例：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

4:一個簡單的滾動代碼學(xué)習(xí)制作示例

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

Js代碼說明：
JavaScript代碼：

復(fù)制代碼代碼如下:

 
var s,sn=0,timer,slen,timer2; 
//初始化設(shè)置 
function scrollInit(){ 
s=getid("s1"); //獲取需要滾動內(nèi)容的對象 
s.scrollTop=0; //初始化滾動位置 
slen=s.innerHTML.split("|"); //獲取滾動內(nèi)容，并存入數(shù)組，以便顯示調(diào)用 
s.innerHTML=""; //清空滾動對象內(nèi)容 
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化輸出滾動內(nèi)容 
s.innerHTML+=slen[0]; 
timer2=setInterval(scrollstart,3000); //開始滾動 
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠標(biāo)經(jīng)過，停止?jié)L動，改變樣式 
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠標(biāo)移開，恢復(fù)滾動 
} 
//開啟滾動效果 
function scrollstart(){ 
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滾動內(nèi)容到底時，重置內(nèi)容位置 
timer=setInterval(scrollexec,30); //執(zhí)行滾動動畫效果 
} 
//滾動動畫效果 
function scrollexec(){ 
if(sn<20){ 
sn++; 
s.scrollTop++; 
}else{ 
sn=0; 
clearInterval(timer); 
} 
} 
//通過ID獲取對象 
function getid(id){return document.getElementById(id);} 
//網(wǎng)頁加載后，執(zhí)行初始化 
window.onload=scrollInit; 

原理解析：
1、首先給容器設(shè)定高度或?qū)挾?，比如div，設(shè)置div高20px;overflow:hidden；
2、容器高度設(shè)定后，內(nèi)容的高度超出20px，超過部分溢出，被隱藏，scrollTop屬性可用，這一點可以用overflow:scroll來看效果；
3、改變?nèi)萜鞯膕crollTop（上下滾動）或scrollLeft（左右滾動）屬性的值，讓內(nèi)容移動位置（滾動的原理）；
4、到滾動的高度scrollTop大于或等于內(nèi)容的高度時，設(shè)置scrollTop=0，讓內(nèi)容返回原來的位置，重新開始滾動，無間斷循環(huán)滾動效果就出現(xiàn)了。

您可能感興趣的文章: