<div class="codetitle"> <span><a style="CURSOR: pointer" data="79304" class="copybut" id="copybut79304" onclick="doCopy('code79304')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code79304"> <br> <br> <br> <br><script type="text/javascript"><!-- <BR>/ /主要的滾動函數<BR>//如果滾動的效果剛好是需要的效果<BR>//那麼你只需要直接呼叫這個函數即可<BR>var moveTag=function(obj){ <BR>var _this = this; <BR>_this.speed = 10;//移動的速度<BR>_this.space = 10 * _this.speed;//移動間隔的時間<BR>obj.scrollLeft=0;//初始化滾動的位置(主要是考慮到需要相容FF) <BR>var divList = obj.getElementsByTagName("DIV"); <BR>var obj2 = new Object();//包含所有滾動列的div <BR>for(var i=0;i<divList.length;i ){ <BR>if(divList[i].parentNode==obj){ <BR>obj2=divList[i]; <BR>break; <BR>} <BR>} <BR>//得到所有需要捲動的欄位<BR>//divList循環兩次的目的是為了不讓樣式名稱影響滾動程式碼<BR>//也就是盡可能減少的捲動程式碼與樣式名稱的耦合<BR>var cellCount = 0; <BR>_this.cellList = new Array(); <BR>for(var i=0;i<divList.length;i ){ <BR>if(divList[i]. parentNode==obj2){ <BR>cellCount ; <BR>_this.cellList.push(divList[i]);//所有需要捲動的欄位<BR>} <BR>} <BR>_this.resetCellList=function( ){ <BR>//這個函數主要是為了讓滾動不間斷<BR>//在每次滾動到終點的時候需要使用<BR>//將已經滾動過的列移到當前列之後<BR> for(var i=0;i<_this.cellList.length-1;i ){ <BR>obj2.removeChild(_this.cellList[i]); <BR>obj2.appendChild(_this.cellList[i]); <BR>} <BR>//重新取得_this.cellList <BR>_this.cellList = new Array(); <BR>for(var i=0;i<divList.length;i ){ <BR>if (divList[i].parentNode==obj2) _this.cellList.push(divList[i]); <BR>} <BR>//alert(_this.cellList.length); <BR>} <BR>_this. resetForMoveRight=function(){ <BR>//這個函數主要是為了讓滾動不間斷<BR>//與resetCellList的區別是這個函數是為了向右不間斷滾動使用的<BR>//在每次滾動到起點的時候需要使用<BR>//將目前列之後的所有列移到目前列之前<BR>if(_this.cellList.length>0){ <BR>for(var i=_this.cellList.length -1;i>0;i--){ <BR>obj2.removeChild(_this.cellList[i]); <BR>obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]); <BR>} <BR>} <BR>//重新取得_this.cellList <BR>_this.cellList = new Array(); <BR>for(var i=0;i<divList.length;i ){ <BR>if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); <BR>} <BR>//alert(_this.cellList.length); <BR>} <BR>//alert(_this.cellList.length); <BR>obj2.style.width = parseInt(obj.offsetWidth * cellCount) "px"; <BR>// <BR>//alert(_this.endScroll); <BR>var cellScroll = obj.offsetWidth;//每次滾動需要滾動多少距離<BR>var endScroll = obj2.offsetWidth - cellScroll;//計算滾動條的終點位置<BR>//alert(_this.cellScroll;//計算滾動條的終點位置<BR>//alert(_this.cellScroll; ; <BR>// <BR>_this.moveLength = cellScroll;//初始化移動偏量,為0的時候,在頁面加載完畢之後將會立即移動;等於_this.cellScroll表示延遲一會兒再開始執行<BR>_this.scrollEnd = false; <BR>_this.scrollTimes = 0; <BR>//休息一會兒<BR>_this.sleep=function(){ <BR>_this.scrollTimes ; <BR>if(_this.scrolls >=_this.space){ <BR>_this.scrollTimes=0; <BR>_this.moveLength=0; <BR>} <BR>}; <BR>_this.moveStart = true;///是否開始移動<BR>_this.isMoveLeft = true;//是否向左移動<BR>_this.move=function(){ <BR>obj.onmouseover=function(){ <BR>_this.moveStart=false; <BR>} <; 🎜>obj.onmouseout=function(){ <BR>_this.moveStart=true; <BR>}; <BR>//重新設定cellList <BR>if(obj.scrollLeft>=endScroll && _this.isMoveLeft){isMoveLeft){isMoveLeft //向左移動，並且已經移動到盡頭<BR>if(_this.moveLength > 0) _this.moveLength = cellScroll;//調整<BR>if(_this.cellList.length>0){ <BR>_this. resetCellList();//更新cellList <BR>obj.scrollLeft=0; <BR>}else{ <BR>_this.scrollEnd = true; <BR>} <BR>}else if(obj.scrollLeft<BR>} <BR>}else if(obj.scrollLeft<BR>} <BR>}else if(obj.scrollLeft<BR>} <BR>}else if(obj.scrollLeft<BR>} <BR>}else if(obj.scrollLeft<BR>} <BR>}else if(obj.scrollLeft< 0 &&rollLeft<0 && !_this.isMoveLeft){//向右移動，並且已經移動到盡頭<BR>if(_this.moveLength > 0) _this.moveLength = cellScroll;//調整<BR>if(_this.cellList.length>0) { <BR>_this.resetForMoveRight();//更新cellList <BR>obj.scrollLeft=endScroll; <BR>}else{ <BR>_this.scrollEnd = false; <BR>} <BR>} <BR>} <BR>/ / <BR>if(_this.scrollEnd){//向左移動<BR>if(_this.moveLength<cellScroll && _this.moveStart){ <BR>obj.scrollLeft--; <BR>_this.moveLength ; >}else if(_this.moveLength>=cellScroll){ <BR>_this.sleep(); <BR>} <BR>} <BR>else{//向右移動<BR>if(_this.moveLength<cellScroll && _this.moveStart){ <BR>obj.scrollLeft ; <🎜>_this.moveLength ; <🎜>}else if(_this.moveLength>=cellScroll){ <🎜>_this.sleep(); <🎜>} <🎜>_this.sleep(); <🎜>} <🎜 >} <🎜>}; <🎜>//自動<🎜>_this.start=function(){ <🎜>setInterval(_this.move,_this.speed); <🎜>}; <BR>//右移動<BR>_this.moveRight=function(){ <BR>_this.scrollEnd = true;//已經捲動到盡頭<BR>_this.isMoveLeft = false;///向右滾動<BR>_this.scrollTimes=0; <BR>}; <BR>//左移動<BR>_this.moveLeft=function(){ <BR>_this.scrollEnd = false;//沒有捲動到盡頭<BR>_this. isMoveLeft = true;//向左捲動<BR>_this.scrollTimes=0; <BR>}; <BR>}; <BR>// --></script> <br><meta http-equiv=" Content-Type" content="text/html; charset=gb2312"> <br><style><!-- <BR>#list{border:#ccc 1px solid;} <BR>#list div div{line -height:30px;text-align:center;border-right:#ccc 1px solid;} <BR>#list{width:150px;height:30px;overflow:hidden;}/*必須的屬性，寬度、高度可以自訂*/ <BR>#list div div{width:150px;height:30px;float:left;}/*必須的屬性，寬度、高度最好與#list的定義一樣*/ <BR>--> </style> <style mce_bogus="1">#list{border:#ccc 1px solid;} <BR>#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} <BR>#list{width:150px;height:30px;overflow:hidden;}/*必須的屬性，寬度、高度可以自訂*/ <BR>#list div div{width:150px;height: 30px;float:left;}/*必須的屬性，寬度、高度最好與#list的定義一樣*/</style> <br><title>無標題文檔</title> <br> <br> <br><div id="list"> <br><div> <br><div>第一列</div> <br><div>第二列</div> <br><div>第三列</div> <br><div>第四列</div> <br><div>第五列</div> <br> </div> <br> div> <br><a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移動</a> <br><a href="javascript:moveRight()" mce_href="javascript :moveRight()">右移動</a> <br><script type="text/javascript"><!-- <BR>var move=new moveTag(document.getElementById("list")); <BR>move.start(); <BR>move.speed=10;//滾動的速度,預設為10 <BR>//move.space=0;//滾動間隔時間,預設滾動速度* 16 <BR>//左移動只能移動到最左邊，無法一直向左移<BR>//為了使滾動沒有間斷，所以最左邊的座標是不斷變化的<BR>//move.moveLeft();//這樣可以設定預設自右向左移動<BR>//move.moveRight();//與move.moveLeft()反方向<BR>var moveLeft=move.moveLeft; <BR>var moveRight=move.moveRight; <BR>//想要一個頁面上有N個地方滾動？ <BR>//沒問題！只要要多new幾個實例即可實現 <BR>// --></script> <br> <br> <br> </div> </div>
