利用JavaScript實現新聞滾動效果(實例程式碼)_javascript技巧

最近要實現一個滾動新聞效果，在網上查了一些資料，發現基本的實現方法有兩種：

1.使用Marquee標籤。 這個標籤的使用我已經轉載了一篇比較詳細的文章，這個標籤的優點是便於使用，缺點是人們已經逐漸不適用它了，許多瀏覽器不支持，甚至在IE8想， XHTML4.0的loose.dtd是可以的，而去掉loose.dtd卻不行。

2.使用div javascript的方法。 這種方法的好處是可以相容於幾乎所有的瀏覽器，並且在可以預料的時間內仍能穩定運作。而使用div使得網頁可以利用現有的css資源來實現許多炫目的效果。缺點是需要一定的程式設計經驗和耐心。

使用javascript div方式的基本原理是一樣的，利用scrollTop屬性和offsetheight屬性來實現移動效果。一般使用兩個div，裡面的內容是一樣的，然後利用兩個div拼接，形成不斷循環的效果。以下是我找到的兩份範例程式碼，第一份正是我用的程式碼，可以運行。第二份我沒做測試。寫出來是為了做個對比，第二份應該是能用的，因為那是我從網站上摘下來的。

第一份代號

複製程式碼 程式碼如下:

           

                                ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
                for (int i = 1; i                     String announceArr[] = (String[]) announceList.get(i);
                    String content = announceArr[1];
                    String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
                %>
                   
                       
                           
                       
                   
                   
                       
                           
                           
                           
                       
                   
                                }
                %>
           

           

       

       


第二份程式碼




複製程式碼


程式碼如下:

 
        <script><BR> var timer;<br><br> document.write('<div id="icefable1" style="width:136;">'<BR> +'<table width=130; border=0 cellspacing=0 cellpadding=0>'<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+''<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+''<BR> +''<BR> +'</script>

'
                +'

');
           /*
            var marqueesHeight          icefable1.scrollTop=0;
           */
         */
         */
    /*
                                 style.overflowX="可見";
                style.overflowY="隱藏";
                noWrap=true;
             ){clearInterval(timer);};
               onmouseout=function(){timer = set間隔（“移動（）”，100） ; };
            }
           /*
       var currentTop=0;
            var stoptime=0;
       🎜 >               icefable2.innerHTML="";
              icefable2.innerHTML =icefable1.innerHTML;
                      1 = setInterval("move()",100) ;
            }                           document.getElementById("icefable2").scrollTop -= (document.getElementById ( "icefable1").offsetHeight - 1);
                else
       ;
            }
            init_srolltext();                                if(currentTop==132)
                {
                     currentTop-= 0 ;
                }
               else {
                    preTop=icefable1.scrollTop;
                  icefable1.scrollTop =4;
                  if( preTop== icefable1.scrollTop){
                       icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
                       icefable1.scrollTop =4;
             }
            }
            //init_srolltext();
       
        腳本