1.先寫兩個最常用最簡潔的滾動代碼
代碼如下：
水平滾動：
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滾動字幕內容</marquee>
垂直滾動：
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滾動字內容</marquee>
2.平穩不間斷滾動
複製代碼 代碼如下:
<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() 不能和調用ID在同一個容器內， 如容器沒預設高度 要制定高度*/
3 有停留滾動
程式碼範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> (function($){ $.fn.extend({ Scroll:function(opt,callback){ //參數初始化 if(!opt) var opt={}; var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕 var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕 var timerID; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), //擷取行高 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數，預設為一屏，即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500; //捲動速度，數值越大，速度越慢（毫秒） timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒） if(line==0) line=1; var upHeight=0-line*lineH; //滾動函數 var scrollUp=function(){ _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數綁定 _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點擊事件 }); } //Shawphy:向下翻頁函數 var scrollDown=function(){ _btnDown.unbind("click",scrollDown); for(i=1;i<=line;i++){ _this.find("li:last").show().prependTo(_this); } _this.css({marginTop:upHeight}); _this.animate({ marginTop:0 },speed,function(){ _btnDown.bind("click",scrollDown); }); } //Shawphy:自動播放 var autoPlay = function(){ if(timer)timerID = window.setInterval(scrollUp,timer); }; var autoStop = function(){ if(timer)window.clearInterval(timerID); }; //滑鼠事件綁定 _this.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下滑鼠事件綁定 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:1,speed:500,timer:1000,up:"btn1",down:"btn2"}); }); </script> </head> <body> <p>多行滾動示範：</p> <div id="scrollDiv"> <ul> <li>這是公告標題的第一行</li> <li>這是公告標題的第二行</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向後</span> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
4:一個簡單的滾動代碼學習製作樣本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>無間斷迴圈滾動效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .scroll{ height:20px; overflow:hidden; font-size:12px; line-height:20px; border:#A5A5A5 1px dotted; width:120px; margin:0px auto; text-align:center; } </style> <script language="javascript" type="text/javascript"> var s,sn=0,timer,slen,timer2; function scrollInit(){ s=getid("s1"); s.scrollTop=0; slen=s.innerHTML.split("|"); s.innerHTML=""; for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"");} s.innerHTML+=slen[0]; timer2=setInterval(scrollstart,3000); s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} } function scrollstart(){ if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} timer=setInterval(scrollexec,30); } function scrollexec(){ if(sn<20){ sn++; s.scrollTop++; }else{ sn=0; clearInterval(timer); } } function getid(id){return document.getElementById(id);} window.onload=scrollInit; </script> </head> <body> <div id="s1" class="scroll">北 京|上 海|廣 州|西 安|南 京|大 連|哈爾濱|武 漢</div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
Js代碼說明：
JavaScript代碼：
複製代碼 代碼如下:
var s,sn=0,timer,slen,timer2;
//初始化設定
function scrollInit(){
s=getid("s1"); //擷取需要滾動內容的對象
s.scrollTop=0; //初始化滾動位置
slen=s.innerHTML.split("|"); //擷取滾動內容，並存入數組，以便顯示調用
s.innerHTML=""; //清空滾動對象內容
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化輸出滾動內容
s.innerHTML+=slen[0];
timer2=setInterval(scrollstart,3000); //開始滾動
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //滑鼠經過，停止滾動，改變樣式
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //滑鼠移開，恢複滾動
}
//開啟滾動效果
function scrollstart(){
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滾動內容到底時，重設內容位置
timer=setInterval(scrollexec,30); //執行滾動動畫效果
}
//滾動動畫效果
function scrollexec(){
if(sn<20){
sn++;
s.scrollTop++;
}else{
sn=0;
clearInterval(timer);
}
}
//通過ID擷取對象
function getid(id){return document.getElementById(id);}
//網頁載入後，執行初始化
window.onload=scrollInit;
原理解析：
1、首先給容器設定高度或寬度，比如div，設定div高20px;overflow:hidden；
2、容器高度設定後，內容的高度超出20px，超過部分溢出，被隱藏，scrollTop屬性可用，這一點可以用overflow:scroll來看效果；
3、改變容器的scrollTop（上下滾動）或scrollLeft（左右滾動）屬性的值，讓內容移動位置（滾動的原理）；
4、到滾動的高度scrollTop大於或等於內容的高度時，設定scrollTop=0，讓內容返回原來的位置，重新開始滾動，無間斷迴圈滾動效果就出現了。
