<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>一個基於jQuery的翻書的Js效果丨芯晴網頁特效丨CsrCode.Cn</title>
<%--<script type="text/javascript" language="javascript" src="http://www.scodefans.net/ajaxjs/jquery-1.4.2.min.js"></script>--%>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
var divLeft = ["內容1", "內容2", "內容3", "內容4", "內容5", "內容6", "內容7", "內容8", "內容9", "內容10"];
var divRight = ["content1", "content2", "content3", "content4", "content5",
"content6", "content7", "content8", "content9", "content10"];
var nowPage = 1;
$("#left").html(divLeft[0]);
$("#right").html(divRight[0]);
var isNext = true ;
$("#firstPage").click(function () {
if(nowPage==1)
{
return;
}
nowPage = 1;
isNext = false;
RedirectPage();
});
$("#prePage").click(function () {
if(nowPage==1)
{
return;
}
nowPage--;
isNext = false;
RedirectPage();
});
$("#nextPage").click(function () {
if(nowPage==10)
{
return;
}
nowPage++;
isNext = true;
RedirectPage();
});
$("#lastPage").click(function () {
if(nowPage==10)
{
return;
}
nowPage = divLeft.length;
isNext = true;
RedirectPage();
});
function RedirectPage() {
var roll = $("<div/>", { css: { position: "absolute", border: "solid 1px #999", background: "red",
top: "10px", height: "494px", width: "1px"
}
}).appendTo($("#book").parent());
$(roll).css("left", isNext ? 806 : 10);
$(roll).animate({
left: isNext ? 10 : 409,
width: "398px",
// "background-position": "272px 0px"
}, 1000, function () {
$("#left").css({ "background": "#fff" });
$(roll).fadeOut(1000, function () {
$(roll).remove();
})
});
$("#left").html(divLeft[nowPage - 1]);
$("#right").html(divRight[nowPage - 1]);
$("#nowPage").text(nowPage);
}
});
</script>
<style type="text/css">
p span
{
width:50px;
color:Red;
font-size:16px;
margin-right:20px;
cursor:pointer;
}
</style>
</head>
<body style="padding:5px;margin:0;">
<div id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">
<div id="left" style="width:398px;height:494px;float:left;cursor:pointer;"></div>
<div id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"></div>
<p style="margin-top:470px;font-size:12px;color:#999;">
<span id="firstPage">首頁</span>
<span id="prePage">上一頁</span>
當前頁：<span id="nowPage" style="color:Blue;">1</span>
<span id="nextPage">下一頁</span>
<span id="lastPage">末頁</span>
</p>
</div>
</body>
</html>