個(gè)方向的無(wú)間歇滾動(dòng)和間歇滾動(dòng)_第1頁(yè)
個(gè)方向的無(wú)間歇滾動(dòng)和間歇滾動(dòng)_第2頁(yè)
個(gè)方向的無(wú)間歇滾動(dòng)和間歇滾動(dòng)_第3頁(yè)
個(gè)方向的無(wú)間歇滾動(dòng)和間歇滾動(dòng)_第4頁(yè)
個(gè)方向的無(wú)間歇滾動(dòng)和間歇滾動(dòng)_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

2、uee("marquee",0,1,760,104,50,5000,3000,52)*參數(shù)說(shuō)明:*參數(shù)1marquee容器ID*參數(shù)20向上滾動(dòng)(0-向上 1-向下 2-向左 3-向右)*參數(shù)31滾動(dòng)的步長(zhǎng)(數(shù)值越大,滾動(dòng)越快)*參數(shù)4760容器可視寬度*參數(shù)552容器可視高度*參數(shù)650定時(shí)器(數(shù)值越小,滾動(dòng)的速度越快 1000=1秒,建議不小于20)*參數(shù)75000間歇停頓延遲時(shí)間(0為不停頓,1000=1秒)*參數(shù)83000開始時(shí)的等待時(shí)間(0為不等待,1000=1秒)*參數(shù)9(52)間歇滾動(dòng)間距(可選,該數(shù)值與延遲均為0則為鼠標(biāo)懸?？刂?*使用建議:*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、為了更準(zhǔn)確的獲取滾動(dòng)區(qū)域的寬度和高度，請(qǐng)盡可能將各滾動(dòng)單位直接賦予正確寬高度*4、對(duì)于TABLE標(biāo)記的橫向滾

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

5、時(shí)沒有更好的解決辦法，建議將其轉(zhuǎn)換成表格(TABLE)的形式來(lái)達(dá)到同等的效果*注意：僅用div的時(shí)候需要用<nobr>來(lái)包括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的時(shí)候需要用<nobr>來(lái)包括div</span><fieldset style="padding:5px;

19、width:770px"><legend>不間斷滾動(dòng)實(shí)例</legend><center>鼠標(biāo)懸?？刂?，左移鼠標(biāo)，向左移動(dòng)；反之亦然。<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>文字翻屏滾動(dòng)<br />需要文字內(nèi)容高度大于div定義的高度，如果小了，則無(wú)法移動(dòng)。<div id="textdiv" style="border

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

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

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

26、單中堅(jiān)強(qiáng)<br /></div><br><hr><br>向上翻屏滾動(dòng)<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>向下翻屏滾動(dòng)<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>向左翻屏滾動(dòng)<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>向右翻屏滾動(dòng)<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ù)滾動(dòng)<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ù)滾動(dòng)<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>向上間歇滾動(dòng)<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>向左間歇滾動(dòng)<nobr><div id="marqueediv8&

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論