27.jquery模擬滾動效果
阿新 • • 發佈：2018-02-24
頁面 light 一次 win 定時 request slide asc created
<%@ 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>
27.jquery模擬滾動效果