非常不錯(cuò)的不間斷循環(huán)滾動(dòng)類(lèi) 兼容多瀏覽器
更新時(shí)間:2006年12月27日 00:00:00 作者:
調(diào)用的方法:
首先你得把腳本鏈接到你的頁(yè)面,或者直接調(diào)用下面這個(gè)鏈接也行。當(dāng)然,最好還是下載到你自己的機(jī)器上。
這樣將根據(jù)文檔中 id="divId" 的某個(gè) DIV 對(duì)象來(lái)創(chuàng)建一個(gè)不間斷的循環(huán)滾動(dòng)區(qū)域。該區(qū)域的寬度為 200px,高度為 100px, 背景顏色為黃色(不用擔(dān)心你的英文不好,也可以用“#ff00ff”這樣的格式),方向?yàn)橄蛏蠞L動(dòng)。其實(shí)你也可以選擇向左滾動(dòng),只要把 "up" 改成 "left" 就行了。但是不支持向右和向下滾動(dòng),所以不用嘗試 "right" 和 "down"——其實(shí)要實(shí)現(xiàn)這兩個(gè)方向也很容易,不過(guò)個(gè)人覺(jué)得不太實(shí)用,所以就沒(méi)做了——每滾動(dòng) 1px 的延遲時(shí)間為 10ms,也就是理想狀態(tài)下是每秒鐘滾動(dòng) 100px。每滾動(dòng) 20px 暫停一次,每次暫停的時(shí)間是 2 秒。并且支持鼠標(biāo)懸停。
上面提到的參數(shù)的排列順序是必須嚴(yán)格遵守的,也就是說(shuō)得按照下面的順序來(lái)排列。如果你想偷懶,可以使用逗號(hào)略過(guò):
第二種方法是這樣的:
當(dāng)然你不需要像上面這樣全部寫(xiě)出來(lái),你只要修改必要的參數(shù)就行了。如果你使用了第一種方法來(lái)創(chuàng)建滾動(dòng)區(qū)域,但是又在后面用這種方式修改過(guò)了,則以后面的為準(zhǔn)。
需要注意的是,你應(yīng)該使用這樣的順序來(lái)建立這個(gè)滾動(dòng)區(qū)域:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行] 提示:您可以先修改部分代碼再運(yùn)行
更新:
現(xiàn)在可以使用百分比來(lái)定義 size 參數(shù)了,像這樣:
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意,一定要加引號(hào),否則會(huì)出錯(cuò)。
sampleDiv.move();
得到的效果就是一個(gè)循環(huán)只滾動(dòng)兩次,同理一次滾完一個(gè)循環(huán)的話,將 size 設(shè)置為 "100%" 就行了。不過(guò)不建議隨意設(shè)置百分比,請(qǐng)盡量設(shè)置成與行數(shù)相符的數(shù)值,否則可能出現(xiàn)意外的空白。
當(dāng)然,仍然支持?jǐn)?shù)字:)
首先你得把腳本鏈接到你的頁(yè)面,或者直接調(diào)用下面這個(gè)鏈接也行。當(dāng)然,最好還是下載到你自己的機(jī)器上。
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script>
下面是第一種使用方法,看起來(lái)似乎比較麻煩一點(diǎn),但是只需要兩行代碼; 復(fù)制代碼 代碼如下:
var sampleDiv = new scrollingAD("divId", 200, 100, "yellow", "up", 10, 2000, 20, true);
sampleDiv.move();
sampleDiv.move();
這樣將根據(jù)文檔中 id="divId" 的某個(gè) DIV 對(duì)象來(lái)創(chuàng)建一個(gè)不間斷的循環(huán)滾動(dòng)區(qū)域。該區(qū)域的寬度為 200px,高度為 100px, 背景顏色為黃色(不用擔(dān)心你的英文不好,也可以用“#ff00ff”這樣的格式),方向?yàn)橄蛏蠞L動(dòng)。其實(shí)你也可以選擇向左滾動(dòng),只要把 "up" 改成 "left" 就行了。但是不支持向右和向下滾動(dòng),所以不用嘗試 "right" 和 "down"——其實(shí)要實(shí)現(xiàn)這兩個(gè)方向也很容易,不過(guò)個(gè)人覺(jué)得不太實(shí)用,所以就沒(méi)做了——每滾動(dòng) 1px 的延遲時(shí)間為 10ms,也就是理想狀態(tài)下是每秒鐘滾動(dòng) 100px。每滾動(dòng) 20px 暫停一次,每次暫停的時(shí)間是 2 秒。并且支持鼠標(biāo)懸停。
上面提到的參數(shù)的排列順序是必須嚴(yán)格遵守的,也就是說(shuō)得按照下面的順序來(lái)排列。如果你想偷懶,可以使用逗號(hào)略過(guò):
復(fù)制代碼 代碼如下:
1、圖層的 ID,必須的參數(shù),不填或者拼寫(xiě)錯(cuò)誤將會(huì)報(bào)錯(cuò);
2、滾動(dòng)區(qū)域的寬度,默認(rèn)值是 200px,所有的默認(rèn)值都可以在 scrollingAD 里面修改;
3、滾動(dòng)區(qū)域的高度,默認(rèn)值是 50px;
4、背景顏色,默認(rèn)值是 "transparent",也就是透明啦;
5、方向,可選值 "up/left";
6、每滾動(dòng) 1px 的延遲時(shí)間,默認(rèn)值 20,單位是 ms——這個(gè)值越大滾動(dòng)越慢;
7、每滾動(dòng)限定距離后停滯的時(shí)間,單位也是 ms,默認(rèn)值 2000,也就是 2 秒啦——如果你不想停滯的話,把它設(shè)為 0 就行了;
8、每?jī)纱瓮g滾動(dòng)的距離,默認(rèn)值是一屏。也就是說(shuō)如果你設(shè)定的方向是 "up" 的話,默認(rèn)值即等于滾動(dòng)區(qū)域的高度,反之方向?yàn)?nbsp;"left",則默認(rèn)值為滾動(dòng)區(qū)域的寬度;
9、是否懸停,默認(rèn)是 true,這個(gè)你不填也沒(méi)關(guān)系;
2、滾動(dòng)區(qū)域的寬度,默認(rèn)值是 200px,所有的默認(rèn)值都可以在 scrollingAD 里面修改;
3、滾動(dòng)區(qū)域的高度,默認(rèn)值是 50px;
4、背景顏色,默認(rèn)值是 "transparent",也就是透明啦;
5、方向,可選值 "up/left";
6、每滾動(dòng) 1px 的延遲時(shí)間,默認(rèn)值 20,單位是 ms——這個(gè)值越大滾動(dòng)越慢;
7、每滾動(dòng)限定距離后停滯的時(shí)間,單位也是 ms,默認(rèn)值 2000,也就是 2 秒啦——如果你不想停滯的話,把它設(shè)為 0 就行了;
8、每?jī)纱瓮g滾動(dòng)的距離,默認(rèn)值是一屏。也就是說(shuō)如果你設(shè)定的方向是 "up" 的話,默認(rèn)值即等于滾動(dòng)區(qū)域的高度,反之方向?yàn)?nbsp;"left",則默認(rèn)值為滾動(dòng)區(qū)域的寬度;
9、是否懸停,默認(rèn)是 true,這個(gè)你不填也沒(méi)關(guān)系;
第二種方法是這樣的:
復(fù)制代碼 代碼如下:
var sampleDiv = new scrollingAD("divId");
sampleDiv.move();
這樣使用的全部都是默認(rèn)值,不過(guò)你應(yīng)該會(huì)覺(jué)得必須改掉某個(gè)參數(shù)才行,那你可以這樣:
var sampleDiv = new scrollingAD("divId");
sampleDiv.width = 500;
sampleDiv.height = 100;
sampleDiv.bgColor = "red";
sampleDiv.direction = "left";
sampleDiv.delay = 10;
sampleDiv.pauseTime = 1000;
sampleDiv.size = 50;
sampleDiv.isHover = false;
sampleDiv.move();
sampleDiv.move();
這樣使用的全部都是默認(rèn)值,不過(guò)你應(yīng)該會(huì)覺(jué)得必須改掉某個(gè)參數(shù)才行,那你可以這樣:
var sampleDiv = new scrollingAD("divId");
sampleDiv.width = 500;
sampleDiv.height = 100;
sampleDiv.bgColor = "red";
sampleDiv.direction = "left";
sampleDiv.delay = 10;
sampleDiv.pauseTime = 1000;
sampleDiv.size = 50;
sampleDiv.isHover = false;
sampleDiv.move();
當(dāng)然你不需要像上面這樣全部寫(xiě)出來(lái),你只要修改必要的參數(shù)就行了。如果你使用了第一種方法來(lái)創(chuàng)建滾動(dòng)區(qū)域,但是又在后面用這種方式修改過(guò)了,則以后面的為準(zhǔn)。
需要注意的是,你應(yīng)該使用這樣的順序來(lái)建立這個(gè)滾動(dòng)區(qū)域:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
更新:
現(xiàn)在可以使用百分比來(lái)定義 size 參數(shù)了,像這樣:
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意,一定要加引號(hào),否則會(huì)出錯(cuò)。
sampleDiv.move();
得到的效果就是一個(gè)循環(huán)只滾動(dòng)兩次,同理一次滾完一個(gè)循環(huán)的話,將 size 設(shè)置為 "100%" 就行了。不過(guò)不建議隨意設(shè)置百分比,請(qǐng)盡量設(shè)置成與行數(shù)相符的數(shù)值,否則可能出現(xiàn)意外的空白。
當(dāng)然,仍然支持?jǐn)?shù)字:)
相關(guān)文章
countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10javascript在myeclipse中報(bào)錯(cuò)的解決方法
jqueryjQueryJQUERYJqueryJQueryjquery報(bào)錯(cuò)jsJSJsmyeclipseMyEclipseMyeclipse,很多朋友應(yīng)該都會(huì)遇到過(guò)這個(gè)情況吧,按照下面的步驟便可迎刃而解2013-10-10一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例,比較實(shí)用,建議新手朋友們可以看看2014-10-10JS+CSS實(shí)現(xiàn)的日本門(mén)戶(hù)網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的日本門(mén)戶(hù)網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果,涉及JavaScript針對(duì)頁(yè)面元素的動(dòng)態(tài)遍歷及樣式動(dòng)態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JS逆向之?webpack?打包站點(diǎn)實(shí)戰(zhàn)原理分享
本文主要介紹了JS逆向之webpack打包站點(diǎn)實(shí)戰(zhàn)原理分享,webpack是前端程序員用來(lái)進(jìn)行打包JS的技術(shù),打包之后的代碼特征非常明顯,更多相關(guān)知識(shí)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容2022-06-06