淺析js 文字滾動效果
更新時間:2010年05月22日 21:59:58 作者:
文字滾動顯示,是網(wǎng)頁企業(yè)公告,文字鏈廣告常用的一種效果,說不定在什么時候你就能看到它。
這種效果在今后的web發(fā)展中是不是常用或者是否依然被設(shè)計(jì)師們所青睞,從技術(shù)層面看并不是最重要的,了解它的實(shí)現(xiàn)原理,對自身前端技術(shù)的提高,會有很大的幫助,世間萬物,萬變不離其宗,掌握了它的運(yùn)行規(guī)律,你才不會被其花花外表所迷惑,甚至你可以在掌握其規(guī)律的前提下,運(yùn)行相關(guān)技術(shù),創(chuàng)造出新的效果來。下面看看它的實(shí)現(xiàn)過程:
1.html
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>
2.css
.box{
width:150px;
height:25px;
line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0; padding:0}
.box li{
height:25px;
line-height:25px;
font-size:12px;
text-align:center;
list-style-type:none;
}
3.js
function startmarquee(lh,speed,delay,index){
/*
函數(shù)startmarquee的參數(shù):
lh:文字一次向上滾動的距離或高度;
speed:滾動速度;
delay:滾動停頓的時間間隔;
index:可以使封裝后的函數(shù)應(yīng)用于頁面當(dāng)中不同的元素;
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動區(qū)域?qū)ο?,賦值給變量o;
o.innerHTML+=o.innerHTML; //對象中的實(shí)際內(nèi)容被復(fù)制了一份,包含了兩個ul,當(dāng)然li標(biāo)簽也
由原來的3行,變?yōu)?行;復(fù)制的目的在于給文字不間斷向上滾動提供過渡。
o.onmouseover=function(){p=true}
//鼠標(biāo)滑過,停止?jié)L動;
o.onmouseout=function(){p=false}
//鼠標(biāo)離開,開始滾動;p是true還是false直接影響到下面start()函數(shù)的執(zhí)行;
o.scrollTop = 0;
//文字內(nèi)容頂端與滾動區(qū)域頂端的距離,初始值為0;
function start(){
t=setInterval(scrolling,speed); //每隔一段時間,setInterval便會執(zhí)行一次
scrolling函數(shù);speed越大,滾動時間間隔越大,滾動速度越慢;
if(!p){ o.scrollTop += 1;}
//滾動停止或開始,取決于p傳來的布爾值;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//如果不被整除,即一次上移的高度達(dá)不到lh,則內(nèi)容會繼續(xù)往上滾動;
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//對象o中的內(nèi)容之前被復(fù)制了一次,所以它的滾動高度,其實(shí)是原來內(nèi)容的兩倍高度;
當(dāng)內(nèi)容向上滾動到scrollHeight/2的高度時,全部3行文字已經(jīng)顯示了一遍,至此整塊內(nèi)容
scrollTop歸0;再等待下一輪的滾動,從而達(dá)到文字不間斷向上滾動的效果;
}else{
clearInterval(t);
//否則清除t,暫停滾動
setTimeout(start,delay);
//經(jīng)過delay間隔后,啟動start() 再連續(xù)滾動
}
}
setTimeout(start,delay);
//第一次啟動滾動;setTimeout會在一定的時間后執(zhí)行函數(shù)start(),且只執(zhí)行一次
}
//傳遞參數(shù)
startmarquee(25,30,3000,0);
//帶停頓效果
startmarquee(25,40,0,1);
//不間斷連續(xù)
以下為全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1.html
復(fù)制代碼 代碼如下:
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>
2.css
復(fù)制代碼 代碼如下:
.box{
width:150px;
height:25px;
line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0; padding:0}
.box li{
height:25px;
line-height:25px;
font-size:12px;
text-align:center;
list-style-type:none;
}
3.js
復(fù)制代碼 代碼如下:
function startmarquee(lh,speed,delay,index){
/*
函數(shù)startmarquee的參數(shù):
lh:文字一次向上滾動的距離或高度;
speed:滾動速度;
delay:滾動停頓的時間間隔;
index:可以使封裝后的函數(shù)應(yīng)用于頁面當(dāng)中不同的元素;
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動區(qū)域?qū)ο?,賦值給變量o;
o.innerHTML+=o.innerHTML; //對象中的實(shí)際內(nèi)容被復(fù)制了一份,包含了兩個ul,當(dāng)然li標(biāo)簽也
由原來的3行,變?yōu)?行;復(fù)制的目的在于給文字不間斷向上滾動提供過渡。
o.onmouseover=function(){p=true}
//鼠標(biāo)滑過,停止?jié)L動;
o.onmouseout=function(){p=false}
//鼠標(biāo)離開,開始滾動;p是true還是false直接影響到下面start()函數(shù)的執(zhí)行;
o.scrollTop = 0;
//文字內(nèi)容頂端與滾動區(qū)域頂端的距離,初始值為0;
function start(){
t=setInterval(scrolling,speed); //每隔一段時間,setInterval便會執(zhí)行一次
scrolling函數(shù);speed越大,滾動時間間隔越大,滾動速度越慢;
if(!p){ o.scrollTop += 1;}
//滾動停止或開始,取決于p傳來的布爾值;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//如果不被整除,即一次上移的高度達(dá)不到lh,則內(nèi)容會繼續(xù)往上滾動;
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//對象o中的內(nèi)容之前被復(fù)制了一次,所以它的滾動高度,其實(shí)是原來內(nèi)容的兩倍高度;
當(dāng)內(nèi)容向上滾動到scrollHeight/2的高度時,全部3行文字已經(jīng)顯示了一遍,至此整塊內(nèi)容
scrollTop歸0;再等待下一輪的滾動,從而達(dá)到文字不間斷向上滾動的效果;
}else{
clearInterval(t);
//否則清除t,暫停滾動
setTimeout(start,delay);
//經(jīng)過delay間隔后,啟動start() 再連續(xù)滾動
}
}
setTimeout(start,delay);
//第一次啟動滾動;setTimeout會在一定的時間后執(zhí)行函數(shù)start(),且只執(zhí)行一次
}
//傳遞參數(shù)
startmarquee(25,30,3000,0);
//帶停頓效果
startmarquee(25,40,0,1);
//不間斷連續(xù)
以下為全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
基于勻速運(yùn)動的實(shí)例講解(側(cè)邊欄,淡入淡出)
下面小編就為大家?guī)硪黄趧蛩龠\(yùn)動的實(shí)例講解(側(cè)邊欄,淡入淡出)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10讓插入到 innerHTML 中的 script 跑起來的實(shí)現(xiàn)代碼
在做 ajax 編程時,我們常常需要將 xmlhttp 獲取到的頁面內(nèi)容通過 innerHTML 來賦給某個容器(比如 div、span 或者 td 等),但是這里存在一個問題,就是我們將要賦給 innerHTML 的頁面內(nèi)容如果包含有腳本程序,這些腳本程序不管是外部腳本,還是內(nèi)部腳本,可能(1)都不會被執(zhí)行。2006-07-07單行 JS 實(shí)現(xiàn)移動端金錢格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動端金錢格式的輸入規(guī)則,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-05-05基于JavaScript實(shí)現(xiàn)年份數(shù)字拼圖效果
時光荏苒,2022年又要收尾了,公司的年會是不是都安排上了?前幾天看到一個年會抽獎系統(tǒng),功能十分的強(qiáng)大,其中有一個年份數(shù)字的拼圖效果深深的吸引了哥,決定用JS實(shí)現(xiàn)一下該效果,需要的可以參考一下2022-12-12