ニュースを上下にスクロール

連続スクロール:コンテンツ(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);
        });
}