再次更新！MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類 Ver 1.6)

更新時間：2007年02月05日 00:00:00 作者：

/*MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類) Ver 1.6*\

　制作時間:2006-08-29 (Ver 0.5)
　發(fā)布時間:2006-08-31 (Ver 0.8)
　更新時間:2007-01-31 (Ver 1.6)
　更新說明: + 加入功能 * 修正、完善
1.6.070131
+ 禁止鼠標控制暫?；蚶^續(xù) (將第9個參數設置為-1或者動態(tài)賦值將ScrollSetp設置為-1)
+ 判斷是否可以滾動 (若內容區(qū)域小于顯示區(qū)域,則自動取消滾動)
+ 跳過初始化錯誤 (避免引起其它滾動的停止)
+ 默認值 (除容器ID必選外，其他參數均可根據情況進行選擇設置)
+ 參數動態(tài)賦值 (方向可用英文表示top|bottom|left|right,使其更直觀、方便)
* 文字滾動不準確 (本次更新主要目的解決此Bug,感謝周珺參與測試)
1.4.061211
+ 鼠標懸停改變滾動方向 (鼠標懸停控制左右滾動)
* 由于文檔下載過慢而導致獲取的高度/寬度不準確
* 瀏覽器兼容問題 (IE、FF、Opera、NS、MYIE)
1.2.060922
+ 指定范圍間歇滾動
* 程序調整
* 連續(xù)間歇滾動停止的錯誤
1.0.060901
+ 向下、向右滾動
+ 開始等待時間
+ 連續(xù)滾動
* 調整時間單位
* 滾動誤差
* 隨機死循環(huán)
* 加強性能
* 程序優(yōu)化
0.8.060829
翻屏不間斷向上、向左滾動

　演示地址:http://www.popub.net/script/MSClass.html
　下載地址:http://www.popub.net/script/MSClass.js

　應用說明:頁面包含<script type="text/javascript" src="MSClass.js"></script>

創(chuàng)建實例:
//參數直接賦值法
new Marquee("marquee")
new Marquee("marquee","top")
......
new Marquee("marquee",0,1,760,52)
new Marquee("marquee","top",1,760,52,50,5000)
......
new Marquee("marquee",0,1,760,104,50,5000,3000,52)
new Marquee("marquee",null,null,760,104,null,5000,null,-1)

//參數動態(tài)賦值法
var marquee1 = new Marquee("marquee") *此參數必選
marquee1.Direction = "top"; 或者 marquee1.Direction = 0;
marquee1.Step = 1;
marquee1.Width = 760;
marquee1.Height = 52;
marquee1.Timer = 50;
marquee1.DelayTime = 5000;
marquee1.WaitTime = 3000;
marquee1.ScrollStep = 52;
marquee1.Start();

參數說明:
ID "marquee" 容器ID (必選)
Direction (0) 滾動方向 (可選,默認為0向上滾動) 可設置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右)
Step (1) 滾動的步長 (可選,默認值為2,數值越大,滾動越快)
Width (760) 容器可視寬度 (可選,默認值為容器初始設置的寬度)
Height (52) 容器可視高度 (可選,默認值為容器初始設置的高度)
Timer (50) 定時器 (可選,默認值為30,數值越小,滾動的速度越快,1000=1秒,建議不小于20)
DelayTime (5000) 間歇停頓延遲時間(可選,默認為0不停頓,1000=1秒)
WaitTime (3000) 開始時的等待時間(可選,默認或0為不等待,1000=1秒)
ScrollStep (52) 間歇滾動間距 (可選,默認為翻屏寬/高度,該數值與延遲均為0則為鼠標懸?？刂?-1禁止鼠標控制)
　使用建議:
1、建議直接賦予容器的顯示區(qū)域的寬度和高度，如(<div id="marquee" style="width:760px;height:52px;">......</div>)
2、建議為容器添加樣式overflow = auto，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)
3、為了更準確的獲取滾動區(qū)域的寬度和高度，請盡可能將各滾動單位直接賦予正確寬高度
4、對于TABLE標記的橫向滾動，需要對TABLE添加樣式display = inline，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)
5、對于翻屏滾動或間歇滾動，要注意各滾動單位間的間距，同時需要對容器的可視高度和可視寬度做好準確的設置，對于各滾動單位間的間距可以通過設置行間距或者單元格的高寬度來進行調整
6、對于LI自動換行的問題暫時沒有更好的解決辦法，建議將其轉換成表格(TABLE)的形式來達到同等的效果
7、針對橫向滾動的文字段落，如果最末端是以空格" "結束的，請將空格" "轉換成" "
8、鼠標懸停滾動思想源自Flash，所以有一定的局限性（容器內僅允許用圖片<img>或者帶鏈接的圖片<a><img></a>的形式，并需要禁止其自動換行）

　感　　謝:
周珺 zhoujun#yuchengtech.com (文字滾動跳行的bug) 2007/01/31
自本程序發(fā)布以來，收到不少朋友的郵件，提出了很多意見和建議，感謝大家的支持！
很不錯。

不過演示代碼的new Marquee("marquee",0,1,760,52,50,5000,3000)那么多參數看了讓人有點迷糊，呵呵，做成這種模式可能讓人看得懂一些：

復制代碼代碼如下:

function Marquee()  
{  
    this.ID = document.getElementById(arguments[0]);  
    this.Direction = arguments[1];  
    this.Step = arguments[2];  
    this.Width = arguments[3];  
    this.Height = arguments[4];  
    this.Timer = arguments[5];  
    this.WaitTime = arguments[6];  
    this.StopTime = arguments[7];  
    this.CTL = this.StartID = this.Stop = this.MouseOver = 0;  
    this.ID.style.overflowX = this.ID.style.overflowY = "hidden";  
    this.ID.noWrap = true;  
    this.ID.style.width = this.Width;  
    this.ID.style.height = this.Height;  
    this.ID.innerHTML += this.ID.innerHTML;  
}  

然后使用：

復制代碼代碼如下:

var m = new Marquee;  
m.ID = document.getElementById("marquee");  
m.Direction = 0;  
m.Step = 1;  
m.Width = 760;  
// ......  
m.Start(m, m.Timer, m.WaitTime, m.StopTime); 

m.Start的參數好像都和m有關，可以省略掉？

您可能感興趣的文章: