上下滚动新闻

mutongwu

连续滚动:该方法要求内容(contentDiv)的高度应该大于其容器(demo)的高度,然后复制一份内容，通过不断修改容器的scrollTop，来使得可见内容变化。(基本代码来自网上)
<div id="demo"><div class="scroll" id="scroll"></div><div id="contentDiv"><ul>    <li><a href="" title="三列自适应宽度液态布局">三列自适应宽度液态布局</a></li>    <li><a href="" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>    <li><a href="" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>    <li><a href="" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>    <li><a href="" title="图片在已知容器中的垂直和水平居中问题">图片在已知容器中的垂直和水平居中问题 </a></li></ul></div><div id="cpDiv"></div></div>

#demo a{background:#FFF; color:#333;}#demo a:hover{background:#FFF;color: #C00;}#demo ul{text-align: left; }#demo li a{padding-left:1.5em;background-color: #F7F7F7;display: block;margin-bottom: 1px;}#demo li {}#cpDiv{background-color:pink;}#demo{overflow:hidden;width: 390px;height: 100px;background-color:#666;margin: 5px;}
    var speed=40;    var demo = document.getElementById('demo');    var contentDiv = document.getElementById('contentDiv');    var cpDiv = document.getElementById('cpDiv');        cpDiv.innerHTML = contentDiv.innerHTML    function Marquee1() {      if (cpDiv.offsetHeight <= demo.scrollTop)          demo.scrollTop -= contentDiv.offsetHeight      else {          demo.scrollTop++      }    }    var MyMar1 = setInterval(Marquee1, speed)    demo.onmouseover = function() {        clearInterval(MyMar1)    }    demo.onmouseout = function() {        MyMar1 = setInterval(Marquee1, speed)    }

单步滚动：通过不断的将第一个节点移动到最后一个节点来实现

<div id="scrollDiv">  <ul>    <li><a href="#">这是公告标题的第一行</a></li>    <li><a href="#">这是公告标题的第二行</a></li>    <li><a href="#">这是公告标题的第三行这是公告标题的第三行</a></li>    <li><a href="#">这是公告标题的第四行</a></li>    <li><a href="#">这是公告标题的第五行</a></li>    <li><a href="#">这是公告标题的第六行</a></li>    <li><a href="#">这是公告标题的第七行</a></li>    <li><a href="#">这是公告标题的第八行</a></li>  </ul></div>
#scrollDiv ul{margin-top:0px;display:block;list-style-type:none;}#scrollDiv li{line-height :1.2em;font-family:宋体;font-size:90%;padding-top:0.3em;list-style-type:disc;}#scrollDiv li a{text-decoration:none;}#scrollDiv li a:hover{text-decoration:underline;color:#ff0000;}#scrollDiv{width:200px;/*  最好设置为上面 li的line-height 与padding的公倍数.  从而可以避免滚动的时候条目因为高度问题而部分被遮盖。*/height:12em;border:1px solid #000;background-color:#ccc;overflow:hidden}

//简单的滚动function doScrollSimple(){    var divs = document.getElementById('scrollDiv');    var uls = divs.getElementsByTagName('ul');    var li = uls[0].getElementsByTagName('li');    uls[0].appendChild(li[0]);}//利用JQuery，稍微带了一点儿动画function doScrollAnimate(){var el = $('#scrollDiv').find("ul:first");        el.animate({    //每次滚动的大小,大约为li元素占据的高度             marginTop: "-1.5em"        },'noraml',function(){                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);        });}