CCClass Of Marquee Scroll通用不間斷滾動JS封裝類
Class Of Marquee Scroll通用不間斷滾動JS封裝類
lass Of Marquee Scroll通用不間斷滾動JS封裝類
MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類) Ver 1.65
*橫向、縱向滾動格式調整(解決橫向滾動換行的問題，無需特別設置)
*徹底解決由於IE問題導致上下滾動頁面留白的問題
+禁止鼠標控制暫停或繼續(將第9個參數設置爲-1或者動態賦值將ScrollSetp設置爲-1)
+判斷是否可以滾動(若內容區域小於顯示區域,則自動取消滾動)
+跳過初始化錯誤(避免引起其它滾動的停止)
+默認值(除容器ID必選外，其他參數均可根據情況進行選擇設置)
+參數動態賦值(方向可用英文表示top|up|bottom|down|left|right,使其更直觀、方便)
*文字滾動不準確(本次更新主要目的解決此Bug,感謝周珺參與測試)
1.4.061211
+鼠標懸停改變滾動方向(鼠標懸停控制左右滾動)
*由於文檔下載過慢而導致獲取的高度/寬度不準確
*瀏覽器兼容問題(IE、FF、Opera、NS、MYIE)
1.2.060922
+指定範圍間歇滾動
*程序調整
*連續間歇滾動停止的錯誤
1.0.060901
+向下、向右滾動
+開始等待時間
+連續滾動
*調整時間單位
*滾動誤差
*隨機死循環
*加強性能
*程序優化
0.8.060829
翻屏不間斷向上、向左滾動
[code]
<!--
/*MSClass(ClassOfMarqueeScroll通用不間斷滾動JS封裝類)Ver1.65*\
製作時間:2006-08-29(Ver0.5)
發佈時間:2006-08-31(Ver0.8)
更新時間:2007-12-28(Ver1.65)
更新說明:+加入功能*修正、完善
1.65.071228
*橫向、縱向滾動格式調整(解決橫向滾動換行的問題，無需特殊設置)
*徹底解決由於IE問題導致上下滾動頁面留白的問題(本次更新主要解決此問題,感謝天上的書生參與測試)
1.6.070131
+禁止鼠標控制暫停或繼續(將第9個參數設置爲-1或者動態賦值將ScrollSetp設置爲-1)
+判斷是否可以滾動(若內容區域小於顯示區域,則自動取消滾動)
+跳過初始化錯誤(避免引起其它滾動的停止)
+默認值(除容器ID必選外，其他參數均可根據情況進行選擇設置)
+參數動態賦值(方向可用英文表示top|up|bottom|down|left|right,使其更直觀、方便)
*文字滾動不準確(本次更新主要目的解決此Bug,感謝周珺參與測試)
1.4.061211
+鼠標懸停改變滾動方向(鼠標懸停控制左右滾動)
*由於文檔下載過慢而導致獲取的高度/寬度不準確
*瀏覽器兼容問題(IE、FF、Opera、NS、MYIE)
1.2.060922
+指定範圍間歇滾動
*程序調整
*連續間歇滾動停止的錯誤
1.0.060901
+向下、向右滾動
+開始等待時間
+連續滾動
*調整時間單位
*滾動誤差
*隨機死循環
*加強性能
*程序優化
0.8.060829
翻屏不間斷向上、向左滾動
應用說明:頁面包含<scripttype="text/javascript"src="MSClass.js"></script>
創建實例:
//參數直接賦值法
newMarquee("marquee")
newMarquee("marquee","top")
......
newMarquee("marquee",0,1,760,52)
newMarquee("marquee","top",1,760,52,50,5000)
......
newMarquee("marquee",0,1,760,104,50,5000,3000,52)
newMarquee("marquee",null,null,760,104,null,5000,null,-1)
//參數動態賦值法
varmarquee1=newMarquee("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、建議直接賦予容器的顯示區域的寬度和高度，如(<divid="marquee"style="width:760px;height:52px;">......</div>)
2、建議爲容器添加樣式overflow=auto，如(<divid="marquee"style="width:760px;height:52px;overflow:auto;">......</div>)
3、爲了更準確的獲取滾動區域的寬度和高度，請儘可能將各滾動單位直接賦予正確寬高度
4、對於TABLE標記的橫向滾動，需要對TABLE添加樣式display=inline，如(<divid="marquee"style="width:760px;height:52px;overflow:auto;"><tablestyle="display:inline">......</table></div>)
5、對於翻屏滾動或間歇滾動，要注意各滾動單位間的間距，同時需要對容器的可視高度和可視寬度做好準確的設置，對於各滾動單位間的間距可以通過設置行間距或者單元格的高寬度來進行調整
6、對於LI自動換行的問題暫時沒有更好的解決辦法，建議將其轉換成表格(TABLE)的形式來達到同等的效果
7、針對橫向滾動的文字段落，如果最末端是以空格""結束的，請將空格""轉換成""
8、鼠標懸停滾動思想源自Flash，所以有一定的侷限性（容器內僅允許用圖片<img>或者帶鏈接的圖片<a><img></a>的形式，並需要禁止其自動換行）
function Marquee()
{
this.ID = document.getElementById(arguments[0]);
if(!this.ID)
{
alert("您要設置的\"" + arguments[0] + "\"初始化錯誤\r\n請檢查標籤ID設置是否正確!");
this.ID = -1;
return;
}
this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
this.Step = 1;
this.Timer = 30;
this.DirectionArray = {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3};
if(typeof arguments[1] == "number" || typeof arguments[1] == "string")this.Direction = arguments[1];
if(typeof arguments[2] == "number")this.Step = arguments[2];
if(typeof arguments[3] == "number")this.Width = arguments[3];
if(typeof arguments[4] == "number")this.Height = arguments[4];
if(typeof arguments[5] == "number")this.Timer = arguments[5];
if(typeof arguments[6] == "number")this.DelayTime = arguments[6];
if(typeof arguments[7] == "number")this.WaitTime = arguments[7];
if(typeof arguments[8] == "number")this.ScrollStep = arguments[8];
this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
this.ID.noWrap = true;
this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
if(arguments.length >= 7)this.Start();
}
Marquee.prototype.Start = function()
{
if(this.ID == -1)return;
if(this.WaitTime < 800)this.WaitTime = 800;
if(this.Timer < 20)this.Timer = 20;
if(this.Width == 0)this.Width = parseInt(this.ID.style.width);
if(this.Height == 0)this.Height = parseInt(this.ID.style.height);
if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];
this.HalfWidth = Math.round(this.Width / 2);
this.HalfHeight = Math.round(this.Height / 2);
this.BakStep = this.Step;
this.ID.style.width = this.Width + "px";
this.ID.style.height = this.Height + "px";
if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;
var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";
var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";
var msobj = this;
msobj.tempHTML = msobj.ID.innerHTML;
if(msobj.Direction <= 1)
{
msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
}
else
{
if(msobj.ScrollStep == 0 && msobj.DelayTime == 0)
{
msobj.ID.innerHTML += msobj.ID.innerHTML;
}
else
{
msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
}
}
var timer = this.Timer;
var delaytime = this.DelayTime;
var waittime = this.WaitTime;
msobj.StartID = function(){msobj.Scroll()}
msobj.Continue = function()
{
if(msobj.MouseOver == 1)
{
setTimeout(msobj.Continue,delaytime);
}
else
{ clearInterval(msobj.TimerID);
msobj.CTL = msobj.Stop = 0;
msobj.TimerID = setInterval(msobj.StartID,timer);
}
}
msobj.Pause = function()
{
msobj.Stop = 1;
clearInterval(msobj.TimerID);
setTimeout(msobj.Continue,delaytime);
}
msobj.Begin = function()
{
msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2;
if((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) {
msobj.ID.innerHTML = msobj.tempHTML;
delete(msobj.tempHTML);
return;
}
delete(msobj.tempHTML);
msobj.TimerID = setInterval(msobj.StartID,timer);
if(msobj.ScrollStep < 0)return;
msobj.ID. = function(event)
{
if(msobj.ScrollStep == 0 && msobj.Direction > 1)
{
var event = event || window.event;
if(window.event)
{
if(msobj.IsNotOpera)
{
msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX;
}
else
{
msobj.ScrollStep = null;
return;
}
}
else
{
msobj.EventLeft = event.layerX - msobj.ID.scrollLeft;
}
msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2;
msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);
msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth);
}
}
msobj.ID. = function()
{
if(msobj.ScrollStep == 0)return;
msobj.MouseOver = 1;
clearInterval(msobj.TimerID);
}
msobj.ID. = function()
{
if(msobj.ScrollStep == 0)
{
if(msobj.Step == 0)msobj.Step = 1;
return;
}
msobj.MouseOver = 0;
if(msobj.Stop == 0)
{
clearInterval(msobj.TimerID);
msobj.TimerID = setInterval(msobj.StartID,timer);
}
}
}
setTimeout(msobj.Begin,waittime);
}
Marquee.prototype.Scroll = function()
{
switch(this.Direction)
{
case 0:
this.CTL += this.Step;
if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
{
this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
this.Pause();
return;
}
else
{
if(this.ID.scrollTop >= this.ClientScroll)
{
this.ID.scrollTop -= this.ClientScroll;
}
this.ID.scrollTop += this.Step;
}
break;
case 1:
this.CTL += this.Step;
if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
{
this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
this.Pause();
return;
}
else
{
if(this.ID.scrollTop <= 0)
{
this.ID.scrollTop += this.ClientScroll;
}
this.ID.scrollTop -= this.Step;
}
break;
case 2:
this.CTL += this.Step;
if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
{
this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
this.Pause();
return;
}
else
{
if(this.ID.scrollLeft >= this.ClientScroll)
{
this.ID.scrollLeft -= this.ClientScroll;
}
this.ID.scrollLeft += this.Step;
}
break;
case 3:
this.CTL += this.Step;
if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
{
this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
this.Pause();
return;
}
else
{
if(this.ID.scrollLeft <= 0)
{
this.ID.scrollLeft += this.ClientScroll;
}
this.ID.scrollLeft -= this.Step;
}
break;
}
}
//-->
[/code]