文字横向滚动效果

<style>
/*My Marquee CSS Start*/
.my_marquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3px 2px;margin-top:30px;}
.my_marquee_main{width:200px;height:160px;border:#234567 solid 1px;padding:2px 3px 3px 2px;overflow:hidden;}
.my_marquee_div1{width:195px;border:Green solid 1px;}
.my_marquee_div2{width:195px;border:Red solid 1px;}
/*My Marquee CSS End*/
</style>
<div id="demo" style="overflow:hidden;height:50px;width:400px; font-size: 12px;align:right;color: #c50800;margin-top:2px;">
<div id="demo1">
<table border="0" cellpadding="0">
<tr style="background-color:green;">
<td><p style="width:400px;">训练场地</p></td>
<td><p style="width:400px;">休闲茶吧</p></td>
<td><p style="width:400px;">会所简介</p></td>
<td><p style="width:400px;">室内赛场</p></td>
<td><p style="width:400px;">牧马场</p></td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
</div>
<div class="my_marquee_info" id="my_marquee_info"></div>
<script language="JavaScript" type="text/javascript">
//滚动速度 数值越大，滚动速度越慢。
var speed = 20;
//滚动区域
document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
//实现滚动的方法
function Marquee(){
if(document.getElementById('demo2').offsetWidth-document.getElementById('demo').scrollLeft<=0)
document.getElementById('demo').scrollLeft-=document.getElementById('demo1').offsetWidth;
else{
document.getElementById('demo').scrollLeft++;
}
document.getElementById('my_marquee_info').innerHTML='';
document.getElementById('my_marquee_info').innerHTML+='div.scrollTop:'+document.getElementById('demo').scrollLeft;
}
var MyMar = setInterval(Marquee,speed);
document.getElementById("demo").onmouseover = function() {clearInterval(MyMar)};
document.getElementById("demo").onmouseout  = function() {MyMar=setInterval(Marquee,speed)};
</script>