<html>
<head>
<title>marquees</title>
<script language="javascript">    function $(id){
        return document.getElementById(id);
    }
var marquees, previousScrollTop, stopScroll, marqueesOffsetHeight, marqueesScrollHeight;
    function init(){
marquees = $("marquees");

        previousScrollTop=null; //这个变量用于判断滚动条是否已经到了尽头 
        stopScroll=false; //这个变量控制是否停止滚动                       
        marqueesOffsetHeight=200; //内容区高度
        marqueesScrollHeight = marquees.scrollHeight;//offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度
        with(marquees){
            noWrap=true; //这句表内容区不自动换行
            //style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
            style.height=marqueesOffsetHeight;
            style.overflowY="auto";// hidden : 滚动条不可见
            onmouseover=new Function("stopScroll=true");// 鼠标经过,停止滚动
            onmouseout=new Function("stopScroll=false"); //鼠标离开,开始滚动
        }
        marquees.innerHTML+=marquees.innerHTML;
        setInterval("scrollUp()",20);
    }//    document.body.onload=init;    function scrollUp(){ 
        if(stopScroll==true){
            return;
        }
        previousScrollTop=marquees.scrollTop; //记录滚动前的滚动条位置
        marquees.scrollTop+=1;//滚动
        if(previousScrollTop==marquees.scrollTop){
                marquees.scrollTop=marqueesScrollHeight - marqueesOffsetHeight + 1;
                //滚动条向下移动一个像素,如果滚动条不动了,则向上滚动到和当前画面一样的位置,当然不仅如此,同样还要向下滚动一个像素(+1):
        }
    }  
    
</script>
</head>
<body onload="init()"> 
<div id="marquees"> 
    <p>content</p>  
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p> 
    <p>content</p>
</div>
</body>
</html>