DIV向上滚动（类似新闻）

<div id="div1" style="overflow:hidden;height:60px;width:120px;background:#e6e6e6"> 
    <div id="div2">  
        <a href="index.php">第一行内容</a><br /> 
        <a href="index.php">第二行内容</a><br /> 
        <a href="index.php">第三行内容</a><br /> 
        <a href="index.php">第四行内容</a><br /> 
        <a href="index.php">第五行内容</a><br /> 
        <a href="index.php">第六行内容</a><br /> 
        <a href="index.php">第七行内容</a><br /> 
        <a href="index.php">第八行内容</a>
    </div> 
    <div id="div3"></div> 
</div>

<script language="JavaScript"> 
function $(str){
    return document.getElementById(str);
}
$("div3").innerHTML = $("div2").innerHTML;
function marQuee(){ 
    if($("div3").offsetTop - $("div1").scrollTop <= 0){
        $("div1").scrollTop -= $("div2").offsetHeight;
    } 
    else{ 
        $("div1").scrollTop ++;
    } 
} 
var quee = setInterval(marQuee, 50);
$("div1").onmouseover = function(){
    clearInterval(quee);
} 
$("div1").onmouseout = function(){
    quee = setInterval(marQuee, 50);
} 
</script> 

效果图如下：

第一行内容
第二行内容
第三行内容
第四行内容
第五行内容
第六行内容
第七行内容
第八行内容

 

转载于:https://www.cnblogs.com/chirifengye/archive/2012/12/21/2828333.html