使用標籤,滾動播放數據庫信息

我們知道在頁面中使用<marquee>標籤實現圖片或文字的滾動播放,是很方便的。比起使用js方法要少些很多代碼。但是通常<marquee>標籤只能滾動播放設置在標籤中的一條信息。有時我們需要滾動播放多條信息,一次播放一條。例如,我們要在數據庫中存放了多條信息,需要在頁面上逐條滾動播放。這樣又該如何實現呢?還是直接上代碼更有說服力:

<%
    request.setCharacterEncoding("UTF-8"); 
    Message message = new Message();
    String sql = "select * from message order by MessageID desc";
    try {
        DBConnection DBConn = new DBConnection();   // 實例化數據庫連接類
        Connection Conn = DBConn.getConn();               // 獲得數據庫連接
        Statement stmt = Conn.createStatement();
        ResultSet rs = null;
        stmt = Conn.createStatement();
        rs = stmt.executeQuery(sql);
%>
        <div id=marqueeDiv>
            <div id="marqueeA" style="display:none;">
<%
        while (rs.next()) {
            int MessageID = rs.getInt("MessageID");    
            String MessageTitle = rs.getString("MessageTitle");
%>
            <a href="messageDetail.jsp?messageId=<%=MessageID%>"><font color="red" size="4">最新消息:<%=MessageTitle%></font></a>
<%
          }
%>
    </div>
</div>
<%
    } catch (Exception e) {
        e.printStackTrace();
    }
%>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery-ui.min.js">
</script>
<script>
    $(window).load(function() {
        jump();
        setInterval(jump, 5000);
    });
    
    var index = -1;
    function jump() {
        var marquee = $('<marquee direction="up" height="40px" align="top"' 
                         + 'hspace="100" width="40%" scrollamount=1 loop="1" onMouseOver="stop();"'
                         + 'onMouseOut="start();"></marquee>');
        var len = $("#marqueeA").find("a").length;
        if (index != len - 1) {
            $('marquee').remove();
            $("#marqueeA").find("a").eq(index + 1).clone().appendTo(marquee);
            marquee.appendTo('#marqueeDiv');
            index++;
        } else {
            $('marquee').remove();
            //初始化計數器
            index = -1;
            //最後一次setInterval循環的下一次,相當於初始化
            jump();
        }
    }
</script>

通過以上方式可以實現數據的逐條播放!

我們可以將上面的代碼專門放在一個jsp文件中,就叫broadcastMessage.jsp吧,然後在需要滾動播放的頁面上插入該文件即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章