css:
.sds_zjmd{width: 420px;height: 168px;border:1px solid #AB1E2E;margin: 0 auto;margin-top: 30px;}
.sds_right_p4{font-size:30px;line-height:40px;color: #AE3137;padding-top: 10px;text-align: center}
.sds_right_p5{margin-left: 26px;margin-top: 10px;height: 93px;overflow: hidden;}
.sds_right_p5 li{font-size:22px;line-height:29px;color: #393939;margin-bottom: 3px;height: 29px}
.sds_right_p5 li span{color: #AE3137;}
html:
<div class="sds_zjmd">
<p class="sds_right_p4">中獎名單</p>
<ul id="div" class="sds_right_p5">
<li>恭喜<span>878739***5</span>獲得 <span>100積分</span></li>
<li>恭喜<span>878739***5</span>獲得 <span>200積分</span></li>
<li>恭喜<span>878739***5</span>獲得 <span>300積分</span></li>
<li>恭喜<span>878739***5</span>獲得 <span>400積分</span></li>
<li>恭喜<span>878739***5</span>獲得 <span>500積分</span></li>
<li>恭喜<span>878739***5</span>獲得 <span>600積分</span></li>
</ul>
</div>
js:
<script type="text/javascript">
<!--文字滾動-->
var area = document.getElementById('div');
var iliHeight = 29;//單行滾動的高度
var speed = 50;//滾動的速度
var time;
var delay= 0;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一樣的內容
function startScroll()
{
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp()
{
if(area.scrollTop % iliHeight==0)
{
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>