js 文字滚动

    <div id="scrollBox">        <ul id="con1">            <li>我是测试内容1！！<li>            <li>我是测试内容2！！<li>            <li>我是测试内容3！！<li>            <li>我是测试内容4！！<li>            <li>我是测试内容5！！<li>            <li>我是测试内容6！！<li>            <li>我是测试内容7！！<li>            <li>我是测试内容8！！<li>            <li>我是测试内容9！！<li>        </ul>        <ul id="con2"></ul>    </div>     <h1 id="con3">点击文本!</h1>

 *{margin:0;padding:0;}            ul,li{list-style:none;display:block;}            #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:auto;}            #scrollBox #con1,#con2{width:280px;float:left;}            #scrollBox li{height:15px;line-height:15px;text-align:center;}

   var area=document.getElementById('scrollBox');    var con1=document.getElementById('con1');    var von2=document.getElementById('con2');    //获取变量    con2.innerHTML=con1.innerHTML;//将con2的html内容和con1的重叠;    function scrollUp(){    if(area.scrollTop>=con1.offsetHeight){   //如果area滚动位置的高度大于等于con1的高度    area.scrollTop=0;//滚动条到顶部    }else{    area.scrollTop++    }    }    var time=50;    var mytimer=setInterval(scrollUp,time);    area.onmouseover=function(){    clearInterval(mytimer);    }    area.onmouseout=function(){    mytimer=setInterval(scrollUp,time);    }    //测试滚轮高度和高度    document.getElementById("con3").onclick=function(){console.log(area.scrollTop);console.log(con1.offsetHeight);};

写完了jq的来写js的。这个js代码简直比我前面用jq写法简单了好多的感觉。。但是比前面也稍微难了一点，jq的是用吧最前面的元素添加到后面去，这个是当滚动条的位置超过con1的高度的时候返回原来的位置，但是这个会导致第一个到顶部的时候底下会空，所以就用con2来暂时填充。到时候会瞬间返回。

主要是scrollTop和offsetHeight在w3c的js里没有，所以有点麻烦，但是也不难理解，可以用我的点击文本来很好的理解他们。