求给下面div加上滚动效果

<div id="latest_site_news" class="colbox">
  <h3><!-- {if $site_news.info.page_count gt 1} --><em class="more"><a href="{url src=index.php?app=article&amp;act=site_news}">{$lang.more}</a></em><!-- {/if} -->{$lang.site_news}</h3>
  <div class="colboxcontent">
    <ul>
      <!-- {foreach from=$site_news.data item=article} -->
      <li><a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape}</a></li>
      <!-- {/foreach} -->
    </ul>
  </div>
  <div class="colbtm"></div>
</div>循环滚动. 无缝的

解决方案 »

  1.   

    overflow-y: scroll;
    这个属性好像可以的
      

  2.   

    php代码。。晕。。
    学java的路过。
    楼主希望什么样的滚动效果？
      

  3.   

    overflow:auto;并设置他的宽高。
      

  4.   

    自己参照着做就可以
    这个是左右无缝重复滚动的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>左右重复滚动</title>
    </head><body style="margin:0px">
    <div id=demo style="overflow: hidden; margin-left:5px; margin-right:5px; width: 670px; color: #ffffff">
          <table cellSpacing=0 cellPadding=0 align=left border=0 >
            <tr>
              <td id=demo1 vAlign=top>
         <table width="656" border="0" cellpadding="0" cellspacing="0" style="height:170px">               <tr>
                     <td width="135"><img src="uploadfiles/img_action01.gif" alt="查看活动信息"></td>
                     <td width="135"><img src="uploadfiles/img_action02.gif" alt="查看活动信息"></td>
                     <td width="135"><img src="uploadfiles/img_action03.gif" alt="查看活动信息"></td>
                     <td width="135"><img src="uploadfiles/img_action04.gif" alt="查看活动信息"></td>
                     <td width="135"><img src="uploadfiles/img_action05.gif" alt="查看活动信息"></td>
                   </tr>
                 </table>
      </td>          <td id=demo2 vAlign=top>&nbsp;</td>
    </tr>
      </table>
      </div>
          <script language="javascript" type="text/javascript">
    var speed3=25//速度数值越大速度越慢
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
    if(demo2.offsetWidth-demo.scrollLeft<=0)
    demo.scrollLeft-=demo1.offsetWidth
    else{
    demo.scrollLeft++
    }
    }
    var MyMar=setInterval(Marquee,speed3)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
    </SCRIPT>
    </body>
    </html>这个是左右无缝重复滚动的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上下重复滚动</title>
    <style type="text/css">
    <!--
    #demo a {width:100%;overflow:hidden; font:12px/16px tahoma; display:block;  margin:2px; color:#4a551c;  padding-left:2px; text-align:left; }
    #demo a:hover { color:#ff6600; }
    -->
    </style>
    </head><body style="margin:0px">
    <div id="demo" style="overflow:hidden;height:330px;width:265px; border:0px; overflow:hidden;">
      <div id=demo1> <!-- 适用于文字和图片滚动，加的文字或图片一定要够多才行，必须要多于2倍 -->
        <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
    <a href="#"><img src="" border="1" width="100" height="25" alt=""/></a>
      </div>
      <div id=demo2></div>
    </div>
    <script>
    var speed=40                                               //滚动速度
    var demo=document.getElementById("demo");
    var demo2=document.getElementById("demo2");
    var demo1=document.getElementById("demo1");
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
      if(demo2.offsetTop-demo.scrollTop<=0)
        demo.scrollTop-=demo1.offsetHeight
      else{
        demo.scrollTop++
      }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>
    </body>
    </html>
      

  5.   

    给个DEMO看看<html>
    <head>
        <title>marqueesUp</title>
    <script language="javascript">    function $(id){
            return document.getElementById(id);
        }
        var marquees, templayer, previousScrollTop, stopScroll, marqueesOffsetHeight, templayerOffsetHeight;
        function init(){
            marquees = $("marquees");
            templayer = $("templayer");        previousScrollTop=null; //这个变量用于判断滚动条是否已经到了尽头 
            stopScroll=false; //这个变量控制是否停止滚动                       
            marqueesOffsetHeight=200; //内容区高度
            with(marquees){
                style.whiteSpace = "nowrap"; //这句表内容区不自动换行
               // style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大
                style.height=marqueesOffsetHeight;
                style.overflowY="auto";// hidden : 滚动条不可见
                onmouseover=new Function("stopScroll=true");// 鼠标经过，停止滚动
                onmouseout=new Function("stopScroll=false"); //鼠标离开，开始滚动
            }        templayer.innerHTML="";
            while(templayer.offsetHeight<marqueesOffsetHeight){
                templayer.innerHTML+=marquees.innerHTML;
            }
            templayerOffsetHeight = templayer.offsetHeight;
            marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
            templayer.innerHTML="";
            setInterval("scrollUp()",20);
        }    function scrollUp(){ 
            if(stopScroll==true){
                return;
            }
            previousScrollTop=marquees.scrollTop; //记录滚动前的滚动条位置
            marquees.scrollTop+=1;//滚动
            if(previousScrollTop == marquees.scrollTop){
                    marquees.scrollTop =templayerOffsetHeight - 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>
    <div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden;z-index:100;"></div></body>
    </html>
      

  6.   

    http://topic.csdn.net/u/20090414/10/c1154ea5-76e1-4ccc-83f4-e4118315978f.html
    <style>
    *{margin:0;line-height:24px;}
    </style><div id="latest_site_news" class="colbox"> 
      <h3> <!-- {if $site_news.info.page_count gt 1} --> <em class="more"> <a href="{url src=index.php?app=article&amp;act=site_news}">{$lang.more} </a> </em> <!-- {/if} -->{$lang.site_news} </h3> 
      
    <div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 
      <div id="news_scroll_items" class="colboxcontent"> 
      <ul> 
          <!-- {foreach from=$site_news.data item=article} --> 
          <li> 1<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 2<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 3<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 4<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 5<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 6<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 7<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <li> 8<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <!-- {/foreach} --> 
        </ul> 
      </div> 
      <div id="news_scroll_replaces" class="colbtm"> </div> 
      </div> 
    </div> <script language="javascript"> 
    var news_scroll_bar = document.getElementById("news_scroll_bar"); 
    var news_scroll_items = document.getElementById("news_scroll_items"); 
    var news_scroll_replaces = document.getElementById("news_scroll_replaces"); 
    var speed  = 20;//滚动速度 alert(news_scroll_items.offsetHeight)
    news_scroll_replaces.innerHTML=news_scroll_items.innerHTML 
    function Marquees(){if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop <=0) 
    news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight +20
    else{ 
    news_scroll_bar.scrollTop++ 
    } 
    } 
    var MyMars=setInterval(Marquees,speed) 
    news_scroll_bar.onmouseover=function() {clearInterval(MyMars)} 
    news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)} 
    </script> 
      

  7.   

    如果效果类4:http://u.discuz.net/home/
    右中哪个《看看大家现在正在做什么…》效果,我把他哪个js 类扣出来了在这:http://www.t6new.cn/include/js/scrollclass.js
    调用方式:           <ul id="scrollbody">          
                      <%Call topHumanIndex()%>
              </ul><script type="text/javascript">startMarquee(95, 60, 0, 'scrollbody');</script>topHumanIndex过程打印的是 <li>... <li>