個方向的無間歇滾動和間歇滾動_第1頁
個方向的無間歇滾動和間歇滾動_第2頁
個方向的無間歇滾動和間歇滾動_第3頁
個方向的無間歇滾動和間歇滾動_第4頁
個方向的無間歇滾動和間歇滾動_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、4個方向的無間歇滾動和間歇滾動<!-把下面代碼加到<head>與</head>之間-><style type="text/css">a,body,selectfont-size:12px;text-decoration:none;</style><script type="text/javascript">/*通用不間斷滾動JS封裝類*深藍蝴蝶*使用方法*new Marquee("marquee",0,1,760,52,50,5000,3000)*new Marq

2、uee("marquee",0,1,760,104,50,5000,3000,52)*參數(shù)說明:*參數(shù)1marquee容器ID*參數(shù)20向上滾動(0-向上 1-向下 2-向左 3-向右)*參數(shù)31滾動的步長(數(shù)值越大,滾動越快)*參數(shù)4760容器可視寬度*參數(shù)552容器可視高度*參數(shù)650定時器(數(shù)值越小,滾動的速度越快 1000=1秒,建議不小于20)*參數(shù)75000間歇停頓延遲時間(0為不停頓,1000=1秒)*參數(shù)83000開始時的等待時間(0為不等待,1000=1秒)*參數(shù)9(52)間歇滾動間距(可選,該數(shù)值與延遲均為0則為鼠標懸?？刂?*使用建議:*1、建議直接賦

3、予容器的顯示區(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標記的橫向滾

4、動，需要對TABLE添加樣式display=inline，*如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">.</table></div>)*5、對于翻屏滾動或間歇滾動，要注意各滾動單位間的間距，*同時需要對容器的可視高度和可視寬度做好準確的設置，對于各滾動單位間的間距可以通過設置行間距或者單元格的高寬度來進行調整*6、對于LI自動換行的問題暫

5、時沒有更好的解決辦法，建議將其轉換成表格(TABLE)的形式來達到同等的效果*注意：僅用div的時候需要用<nobr>來包括div*/var Marquee=function()this.ID=document.getElementById(arguments0);this.Direction=arguments1;this.Step=arguments2;this.BakStep=arguments2;this.Width=arguments3;this.HalfWidth=Math.round(arguments3/2);this.Height=arguments4;this.

6、Timer=arguments5;this.DelayTime=arguments6;this.WaitTime=arguments7;if(arguments8 | arguments8=0)this.ScrollStep=arguments8;elsethis.ScrollStep=this.Direction>1?this.Width:this.Height;this.Correct=0;this.CTL=0;this.StartID=0;this.Stop=0;this.MouseOver=0;this.ID.style.overflow="hidden"th

7、is.ID.style.overflowX="hidden"this.ID.style.overflowY="hidden"this.ID.noWrap=true;this.ID.style.width=this.Width+"px"this.ID.style.height=this.Height+"px"this.ClientScroll=this.Direction>1?parseInt(this.ID.scrollWidth):parseInt(this.ID.scrollHeight);this.ID

8、.innerHTML+=this.ID.innerHTML;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")=-1);if(arguments.length>=8)this.Start(this,this.Timer,this.DelayTime,this.WaitTime);Mtotype.Start=function(msobj,timer,delaytime,waittime)msobj.StartID=function()msobj.Scroll();ms

9、obj.Continue=function()if(msobj.MouseOver=1)setTimeout(msobj.Continue,delaytime);elseclearInterval(msobj.TimerID);msobj.CTL=0;msobj.Stop=0;msobj.TimerID=setInterval(msobj.StartID,timer);msobj.Pause=function()msobj.Stop=1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime);msobj.Begin=f

10、unction()msobj.ID.onmousemove=function(evt)if(msobj.ScrollStep=0 && msobj.Direction>1)var event=null;if(window.event)event=window.event;if(msobj.IsNotOpera)msobj.EventLeft=event.srcElement.id=msobj.ID.id?parseInt(event.offsetX)-parseInt(msobj.ID.scrollLeft):parseInt(event.srcElement.offse

11、tLeft)-parseInt(msobj.ID.scrollLeft)+parseInt(event.offsetX);elsemsobj.ScrollStep=null;return;elseevent=evt;msobj.EventLeft=parseInt(event.layerX)-parseInt(msobj.ID.scrollLeft);msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step

12、=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);msobj.ID.onmouseover=function()if(msobj.ScrollStep=0)return;msobj.MouseOver=1;clearInterval(msobj.TimerID);msobj.ID.onmouseout=function()if(msobj.ScrollStep=0)if(msobj.Step=0)msobj.Step=1;return;msobj.MouseOver=0;if(msobj.Stop=0)clearInt

13、erval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer);msobj.TimerID=setInterval(msobj.StartID,timer);setTimeout(msobj.Begin,waittime);Mtotype.Scroll=function()if(this.Correct=0 && this.CTL>this.ClientScroll)this.ClientScroll=(this.Direction>1)?Math.round(parseIn

14、t(this.ID.scrollWidth)/2):Math.round(parseInt(this.ID.scrollHeight)/2);this.Correct=1;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;elseif(this.ID.scrollTop&g

15、t;=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;elseif(this.ID.scrollTop<=0)this.ID.sc

16、rollTop+=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;elseif(this.ID.scrollLeft>=this.ClientScroll)this.ID.scrollLeft-=thi

17、s.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;elseif(this.ID.scrollLeft<=0)this.ID.scrollLeft+=this.ClientScroll;this.ID.scro

18、llLeft-=this.Step;break;this.ID.scrollTop+="px"this.ID.scrollLeft+="px"</script></head><body><!-把下面代碼加到<body>與</body>之間-><span style="color:#ff0000">僅用div的時候需要用<nobr>來包括div</span><fieldset style="padding:5px;

19、width:770px"><legend>不間斷滾動實例</legend><center>鼠標懸?？刂?，左移鼠標，向左移動；反之亦然。<nobr><div id="marqueedivmouse" style="width:760px;overflow:auto;"><img src=" style="width:126px;height:138px" border="0" hspace="1">&

20、lt;img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspa

21、ce="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" bord

22、er="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></div></nobr><br><hr><br>文字翻屏滾動<br />需要文字內容高度大于div定義的高度，如果小了，則無法移動。<div id="textdiv" style="border

23、:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">隱形的翅膀<br />每一次<br />都在徘徊孤單中堅強<br />每一次<br />就算很受傷<br />也不閃淚光<br />我知道<br />我一直有雙隱形的翅膀<br />帶我飛<br />飛過絕望<br />不去想<br />他們擁有美麗的太陽<br />我看見<br /

24、>每天的夕陽<br />也會有變化<br />我知道<br />我一直有雙隱形的翅膀<br />帶我飛<br />給我希望<br />我終于<br />看到<br />所有夢想都開花<br />追逐的年輕<br />歌聲多嘹亮<br />我終于<br />翱翔<br />用心凝望不害怕<br />哪里會有風<br />就飛多遠吧<br />隱形的翅膀<br />讓夢恒久比天長<br

25、 />留一個<br />愿望<br />讓自己想象</div><br><hr><br>文字間歇滾動<br />需要文字內容高度大于div定義的高度，如果小了，則無法移動。<div id="textdiv1" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">隱形的翅膀<br />每一次<br />都在徘徊孤

26、單中堅強<br /></div><br><hr><br>向上翻屏滾動<div id="marqueediv1" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align="center"> <

27、tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"

28、><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52" align="center

29、" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:

30、138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向下翻屏滾動<div id="marqueediv2" style="widt

31、h:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="52" align="center" valign="middle"><img src=" style=

32、"width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><

33、img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0&qu

34、ot; hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px&qu

35、ot; border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左翻屏滾動<nobr><div id="marqueediv3" style="width:640px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px&

36、quot; border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="widt

37、h:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&q

38、uot; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></div></nobr><br><hr><br>向右翻屏滾動<nobr><div id="marqueediv

39、4" style="width:640px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&qu

40、ot; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1&quo

41、t;><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0&quo

42、t; hspace="1"></div></nobr><br><hr><br>向上連續(xù)滾動<div id="marqueediv5" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align=&qu

43、ot;center"> <tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0&qu

44、ot; hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52&

45、quot; align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style=&

46、quot;width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左連續(xù)滾動<nobr><div id=&quo

47、t;marqueediv6" style="width:760px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><

48、;img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace

49、="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border

50、="0" hspace="1"></div></nobr><br><hr><br>向上間歇滾動<div id="marqueediv7" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0&quo

51、t; align="center"> <tr><td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border

52、="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr><td height

53、="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&quo

54、t; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左間歇滾動<nobr><div id="marqueediv8&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論