欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析js 文字滾動(dòng)效果

 更新時(shí)間:2010年05月22日 21:59:58   作者:  
文字滾動(dòng)顯示,是網(wǎng)頁(yè)企業(yè)公告,文字鏈廣告常用的一種效果,說(shuō)不定在什么時(shí)候你就能看到它。
這種效果在今后的web發(fā)展中是不是常用或者是否依然被設(shè)計(jì)師們所青睞,從技術(shù)層面看并不是最重要的,了解它的實(shí)現(xiàn)原理,對(duì)自身前端技術(shù)的提高,會(huì)有很大的幫助,世間萬(wàn)物,萬(wàn)變不離其宗,掌握了它的運(yùn)行規(guī)律,你才不會(huì)被其花花外表所迷惑,甚至你可以在掌握其規(guī)律的前提下,運(yùn)行相關(guān)技術(shù),創(chuàng)造出新的效果來(lái)。下面看看它的實(shí)現(xiàn)過(guò)程:
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:文字一次向上滾動(dòng)的距離或高度;
speed:滾動(dòng)速度;
delay:滾動(dòng)停頓的時(shí)間間隔;
index:可以使封裝后的函數(shù)應(yīng)用于頁(yè)面當(dāng)中不同的元素;
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動(dòng)區(qū)域?qū)ο螅x值給變量o;
o.innerHTML+=o.innerHTML; //對(duì)象中的實(shí)際內(nèi)容被復(fù)制了一份,包含了兩個(gè)ul,當(dāng)然li標(biāo)簽也
由原來(lái)的3行,變?yōu)?行;復(fù)制的目的在于給文字不間斷向上滾動(dòng)提供過(guò)渡。
o.onmouseover=function(){p=true}
//鼠標(biāo)滑過(guò),停止?jié)L動(dòng);
o.onmouseout=function(){p=false}
//鼠標(biāo)離開,開始滾動(dòng);p是true還是false直接影響到下面start()函數(shù)的執(zhí)行;
o.scrollTop = 0;
//文字內(nèi)容頂端與滾動(dòng)區(qū)域頂端的距離,初始值為0;
function start(){
t=setInterval(scrolling,speed); //每隔一段時(shí)間,setInterval便會(huì)執(zhí)行一次
scrolling函數(shù);speed越大,滾動(dòng)時(shí)間間隔越大,滾動(dòng)速度越慢;
if(!p){ o.scrollTop += 1;}
//滾動(dòng)停止或開始,取決于p傳來(lái)的布爾值;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//如果不被整除,即一次上移的高度達(dá)不到lh,則內(nèi)容會(huì)繼續(xù)往上滾動(dòng);
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//對(duì)象o中的內(nèi)容之前被復(fù)制了一次,所以它的滾動(dòng)高度,其實(shí)是原來(lái)內(nèi)容的兩倍高度;
當(dāng)內(nèi)容向上滾動(dòng)到scrollHeight/2的高度時(shí),全部3行文字已經(jīng)顯示了一遍,至此整塊內(nèi)容
scrollTop歸0;再等待下一輪的滾動(dòng),從而達(dá)到文字不間斷向上滾動(dòng)的效果;
}else{
clearInterval(t);
//否則清除t,暫停滾動(dòng)
setTimeout(start,delay);
//經(jīng)過(guò)delay間隔后,啟動(dòng)start() 再連續(xù)滾動(dòng)
}
}
setTimeout(start,delay);
//第一次啟動(dòng)滾動(dòng);setTimeout會(huì)在一定的時(shí)間后執(zhí)行函數(shù)start(),且只執(zhí)行一次
}
//傳遞參數(shù)
startmarquee(25,30,3000,0);
//帶停頓效果
startmarquee(25,40,0,1);
//不間斷連續(xù)

以下為全部代碼:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

相關(guān)文章

  • 基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)

    基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)

    下面小編就為大家?guī)?lái)一篇基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • html頁(yè)面顯示年月日時(shí)分秒和星期幾的兩種方式

    html頁(yè)面顯示年月日時(shí)分秒和星期幾的兩種方式

    在html頁(yè)面中顯示時(shí)間是很常見(jiàn)的,實(shí)現(xiàn)的方法有很多,下面為大家簡(jiǎn)單介紹兩種方式,有需求的朋友可以參考下,希望對(duì)大家有所幫助
    2013-08-08
  • 讓插入到 innerHTML 中的 script 跑起來(lái)的實(shí)現(xiàn)代碼

    讓插入到 innerHTML 中的 script 跑起來(lái)的實(shí)現(xiàn)代碼

    在做 ajax 編程時(shí),我們常常需要將 xmlhttp 獲取到的頁(yè)面內(nèi)容通過(guò) innerHTML 來(lái)賦給某個(gè)容器(比如 div、span 或者 td 等),但是這里存在一個(gè)問(wèn)題,就是我們將要賦給 innerHTML 的頁(yè)面內(nèi)容如果包含有腳本程序,這些腳本程序不管是外部腳本,還是內(nèi)部腳本,可能(1)都不會(huì)被執(zhí)行。
    2006-07-07
  • 單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則

    單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則

    這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-05-05
  • JS重學(xué)系列之聊聊new操作符

    JS重學(xué)系列之聊聊new操作符

    這篇文章主要給大家介紹了關(guān)于JS重學(xué)系列之new操作符的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • javascript使用正則表達(dá)式檢測(cè)IP地址

    javascript使用正則表達(dá)式檢測(cè)IP地址

    這篇文章主要介紹了javascript使用正則表達(dá)式檢測(cè)IP地址的方法,需要的朋友可以參考下
    2014-12-12
  • 使用rollup打包JS的方法步驟

    使用rollup打包JS的方法步驟

    這篇文章主要介紹了使用rollup打包JS的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • javascript異步編程的六種方式總結(jié)

    javascript異步編程的六種方式總結(jié)

    這篇文章主要介紹了javascript異步編程的六種方式總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • js跨域請(qǐng)求的5中解決方式

    js跨域請(qǐng)求的5中解決方式

    這篇文章主要介紹了js跨域請(qǐng)求的5中解決方式的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • 基于JavaScript實(shí)現(xiàn)年份數(shù)字拼圖效果

    基于JavaScript實(shí)現(xiàn)年份數(shù)字拼圖效果

    時(shí)光荏苒,2022年又要收尾了,公司的年會(huì)是不是都安排上了?前幾天看到一個(gè)年會(huì)抽獎(jiǎng)系統(tǒng),功能十分的強(qiáng)大,其中有一個(gè)年份數(shù)字的拼圖效果深深的吸引了哥,決定用JS實(shí)現(xiàn)一下該效果,需要的可以參考一下
    2022-12-12

最新評(píng)論