无缝连续滚动字幕

如题。

原来一直用的是这段代码：（向上方向:

<div id="dome" style="overflow: hidden; height: 80px; width: 320px;">
            <div id="dome1">
                <div id="notice_cont">
                    <ul>
                      <%=showNotices()%>   
                    </ul>
                  
                </div>
            </div>
            <div id="dome2">
            </div>
        </div>

       <script>
var speed=100;
dome2.innerHTML=dome1.innerHTML;
dome.scrollTop=dome.scrollHeight;
function Marquee(){
if(dome1.offsetTop-dome.scrollTop>=0)
dome.scrollTop+=dome2.offsetHeight;
else{
dome.scrollTop--;
}
}
var MyMar=setInterval(Marquee,speed);
dome.οnmοuseοver=function() {clearInterval(MyMar)}
dome.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);}
</script>

后来发现一个问题，单只有一条通知的时候重复显示，并且不能滚动，其次2个的时候一顿一顿的滚动，效果不好。但是3个以上显示效果不错.今天发现第一个DIV的高度设置很重要，应设置为你所要滚动条数的高度总和，还要小些才行，打于就会不滚动。哎，回去好好想想原理。。。

 

2011-6-9

http://www.cnblogs.com/rubylouvre/archive/2009/10/01/1577219.html 这个是可以运行的。我试了下，是可以的，我知道我的为什么不行的原因，因为我要滚动的不仅仅是文字，是文字+图片所以需要放在一个DIV 里面，但是改成DIV后就不能循环滚了~~~

 

 

 

于是上网找，没能解决。自己目前对JS又不是太懂，于是换了一个： 有点类似翻牌的效果,代码如下：

 <div style="overflow: hidden; line-height: 18px; height: 60px; width: 360px">
            <div id="notice_cont" style="margin-top: 0px">
                <ul>
                   <%=showNotices()%> 
                </ul>
            </div>
        </div>

        <script>
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("notice_cont");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.οnmοuseοver=function(){p=true;}
o.οnmοuseοut=function(){p=false;}
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(20,20,1500);   //自行设置
        </script>

效果不错，它能一个一个往上翻，显示一个停顿下，同时下面的依次网上挪动。已测试1，2，3 都可完美滚动。不错，类似现在CSDN首页上的文字滚动效果。

 

!!! 今天发现一个BUG：条数多的时候10左右，每次滚一下，好线就会减1px,将-1+"px"，改为2还是不行，设置startmarquee(X,X,X);  都没用。代码也看了，没看出来。我查看了CSDN首页JS 发现基本就是这么个思路做的。可是CSDN显示在多都不会错位~

不过最后还是设置startmarquee(X,X,X);给解决了。<div style="overflow: hidden; line-height: 18px; height: 60px; width: 360px"> 中 line-height: 18px; 很重要，它是给定显示每行的宽度，startmarquee第一个参数要设置比line-height: 给1~2px可以解决。以后有就会在改改吧，就这样。

另附上显示部分的CSS：

#notice_cont
{
 padding-left: 2px;
}
#notice_cont li {
 
 background-image: url(../images/1217.gif);
 background-repeat: no-repeat;
 background-position: 1px;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color: #729EC0;
 list-style-type: none;
 
 padding-left: 5px;
 width: 320px;
}