JS实现简单的文字无缝上下滚动功能示例

来源：枫云科技网

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="author" content="" />
 <title>文字列表无缝滚动代码</title>
 <style type="text/css">
 *{
 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;
 }
 </style>
</head>
<body>
<div id="demo">
 <ul id="demo1">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 </ul>
 <div id="demo2"></div>
</div>
<script type="text/javascript">
 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.onmouseover=function(){clearInterval(MyMar)}
 demo.onmouseout=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.onmouseover=function() {clearInterval(MyMar2)}
 // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
</body>
</html>

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

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数算用法总结》

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