第JS實現(xiàn)簡單的文字無縫上下滾動功能示例本文實例講述了JS實現(xiàn)簡單的文字無縫上下滾動功能。分享給大家供大家參考，具體如下：

!DOCTYPEhtml

html

head

metacharset="utf-8"

metaname="author"content=""/

title文字列表無縫滾動代碼/title

styletype="text/css"

margin:0px;

padding:0px;

border:0px;

body{font-size:12px}

#demo{

overflow:hidden;

height:80px;

width:280px;

margin:90pxauto;

position:relative;

#demo1{

height:auto;

text-align:left;

#demo2{

height:auto;

text-align:left;

#demo1li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

#demo2li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

/style

/head

body

divid="demo"

ulid="demo1"

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

/ul

divid="demo2"/div

/div

scripttype="text/javascript"

varspeed=40

//向上滾動

vardemo=document.getElementById("demo");

vardemo2=document.getElementById("demo2");

vardemo1=document.getElementById("demo1");

demo2.innerHTML=demo1.innerHTML

functionMarquee(){

if(demo.scrollTop=demo1.offsetHeight){

demo.scrollTop=0;

else{

demo.scrollTop=demo.scrollTop+1;

varMyMar=setInterval(Marquee,speed)

demo.unction(){clearInterval(MyMar)}

demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

//向下滾動

//demo2.innerHTML=demo1.innerHTML

//demo.scrollTop=demo.scrollHeight

//functionMarquee2(){

//if(demo1.offsetTop-demo.scrollTop=0)

//demo.scrollTop+=demo2.offsetHeight

//else{

//demo.scrollTop--

//}

//}

//varMyMar2=setInterval(Marquee2,speed)

//demo.unction(){clearInterval(MyMar2)}

//demo.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}

/script

/body

/html

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技