这种css和结构代码混在一起的形式，让人很不舒服，不过为了简便，我也懒得改了。
我改了一下，帮助你理解
<div id="demo" style="overflow: hiddenWIDTH: 70pxheight: 50pxborder:solid 1px #222222" align="center">
<table><tr>
<td id="demo1" style="border:solid 1px red" >
aaaaaabbbcccccc
</td>
<td id="demo2" style="border:solid 1px green"><!-- 新加2个style帮助你理解，删除后你就明白了 -->
aaaaaabbb<!-- 其实这里根本没必要完全一样，因为这里的后半截是否显示取决于demo的宽度，也就是显示区域 -->
</td>
</tr></table>
</div>
<SCRIPT language="javascript">
function Marquee(){
if(demo1.offsetWidth-demo.scrollLeft<=0) //这里把demo2改成demo1,当demo1完全滚出显示区域时，(转下面）
demo.scrollLeft=0//让内部滚动条（这里是demo1,demo2)回归原位，造成连续滚动假象
else{
demo.scrollLeft++ //让demo的内部滚动条继续向左滚动1px
}
}
var MyMar=setInterval(Marquee,5)
demo.onmouseover=function() {clearInterval(MyMar)} //当鼠标放在div元素上面时，清除下面的定时执行功能
demo.onmouseout=function() {MyMar=setInterval(Marquee,5)} //每5毫秒执行一次函数，也就是每5秒滚动1px
</SCRIPT>
<script type="text/javascript">$(document).ready(function() {
var Top = -400 //定义一个向上移动的距离，这个数值和你图片或DIV的高度相等
var Time = 500 //定义一个速度
function move() {
if ($("#box").is(":animated")) return
$("#box").animate({
"margin-top": Top
}, Time) //animate方法，只能对数值型的值进行渐变
Top += -400 //运行一次增加一个图片的高度
if (Top == -800) //判断当总高度大于你DIV或者图片总高度
{
Top = 0 //把距离设置回0
Time = 500 //加快移动速度
} else {
Time = 500 //否则减慢速度
}
}
setInterval(move, 6000) //3秒执行一次move()
})
</script>
