我們知道在頁面中使用<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吧,然後在需要滾動播放的頁面上插入該文件即可。