<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div{
width: 150px;
height: 100px;
border: 1px red solid;
}
</style>
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//页面一加载完成，生成4个div
createDiv();
//定时器,每隔一秒执行一次
window.setInterval("gogo()",1000);
})
//循环
function gogo(){
//目的：让第一个div慢慢的从下向上消失
$("div:first").slideUp(1000,function(){
//第一个div消失后，让第一个div放到末尾
$("body").append($(this));
//淡入
$(this).fadeIn(1000);
});
}
//生成的4个div
function createDiv(){
for(var i=1;i<=4;i++){
//创建div
var $div=$("<div></div>");
//给div设置文本的内容
$div.text("生成的div"+i);
//创建的div添加到body标签下
$("body").append($div);
}
}
</script>
</head>
<body>
</body>
</html>
