<style>
.liuyan{
width: 651px;
padding: 10px 20px;
border: 1px solid #3c5791;
margin-left: 250px;
text-align: left;
margin-top: 99px;
height: 221px;
overflow: hidden;
font-size: 20px;
background-color: #cfd2ff;
position: relative;
.w1{
color: #035307;margin-right: 5px;
}
.w2{color: #7f2020}
.w3{color: #3c5791}
ul{
font-size: 14px;
width:651px;
li{padding: 5px 0;border-bottom: 1px dotted #d6d6d6}
}
}
</style>
<html>
<div class="liuyan" id="demo">
<div id="demo-wrap">
<div id="demo1">
<ul id="js-list">
<li><span class="w1">纪元32服</span><span class="w2">放牛弓箭手</span>
<span class="w3">选我选我，我是全游戏最可爱的人。</span>
</li>
<li><span class="w1">应用宝483服</span><span class="w2">斯玛特 </span>
<span class="w3">《永恒纪元》让我爱上游戏，并且是我第一个游戏</span>
</li>
<li><span class="w1">永恒284服</span><span class="w2">无名氏 </span>
<span class="w3">希望永恒纪元越办越好，翅膀炫炫的，坐骑酷酷的，策划师帅帅的，小布林美美哒</span>
</li>
<li><span class="w1">小米42服</span><span class="w2">肩上能站人</span>
<span class="w3">一个游戏妹子多了，人就多了。我为妹子袋盐</span>
</li>
<li><span class="w1">天使1472服</span><span class="w2">内裤上有熊</span>
<span class="w3">古代也有花木兰从军呢，什么时候给我整个女战士出来呢。</span>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
//获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
//给demo1,demo2加相同的高度
demo1.style.height=document.getElementById("js-list").offsetHeight+"px";
demo2.style.height=demo1.offsetHeight+"px";
//定时器，每隔50毫秒调用一次scrollup()函数，来实现文字的滚动
var timer=window.setInterval("scrollup()",50);
//定义函数
function scrollup()
{
//如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
if(parseFloat(demo.scrollTop)>=document.getElementById("js-list").offsetHeight)
{
demo.scrollTop=0;
}else
{
demo.scrollTop++;
}
}
</script>
</html>
