java 变换滚动文字_JS实现简单的文字无缝上下滚动功能示例

本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考，具体如下：

文字列表无缝滚动代码

*{

margin:0px;

padding:0px;

border:0px;

}

body{font-size:12px}

#demo{

overflow:hidden;

height:80px;

width:280px;

margin:90px auto;

position:relative;

}

#demo1{

height:auto;

text-align:left;

}

#demo2{

height:auto;

text-align:left;

}

#demo1 li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

}

#demo2 li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

var speed=40

// 向上滚动

var demo=document.getElementById("demo");

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollTop>=demo1.offsetHeight){

demo.scrollTop=0;

}

else{

demo.scrollTop=demo.scrollTop+1;

}

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function(){clearInterval(MyMar)}

demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}

//向下滚动

// demo2.innerHTML=demo1.innerHTML

// demo.scrollTop=demo.scrollHeight

// function Marquee2(){

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

// demo.scrollTop+=demo2.offsetHeight

// else{

// demo.scrollTop--

// }

// }

// var MyMar2=setInterval(Marquee2,speed)

// demo.οnmοuseοver=function() {clearInterval(MyMar2)}

// demo.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。