搜尋

首頁  >  文章  >  web前端  >  利用JavaScript實現新聞滾動效果(實例程式碼)_javascript技巧

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

WBOY
WBOY原創
2016-05-16 17:12:241154瀏覽

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

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 < announceList.size() && i < 5; i++) {
String announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
                   
                       
                           
                   

                       

                   
                       
                           
                           
                           
                       
                   

                               
                           
                                <%=content%>  <%=date%>
                           

                <%
}
%>
           

           

       

       


第二份程式碼




複製程式碼


程式碼如下: