jQuery翻页效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12952/article/details/82405080

<!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 Turnning</title>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#right")
.click(
function() {
var roll = $(
"<div/>",
{
css : {
position : "absolute",
border : "solid 1px #999",
left : "806px",
top : "10px",
height : "494px",
width : "1px",
background : "#fff url(http://www.codefans.net/jscss/demoimg/201011/eCX.png) repeat-y -200px 0px"
}
}).appendTo($("#book").parent());
$(roll).animate( {
left : "10px",
width : "398px",
"background-position" : "272px 0px"
}, 1000, function() {
$("#left").css( {
"background" : "#fff"
});
$(roll).fadeOut(300, function() {
$(roll).remove();
})
});
});
});
</script>
</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; background: url(http://www.codefans.net/jscss/demoimg/201011/PLh.png) no-repeat top left; cursor: pointer;"></div>
<div id="right"
style="width: 398px; height: 494px; float: left; background: #fff; cursor: pointer; margin-left: 1px; text-align: right;">
<p style="margin-top: 470px; font-size: 12px; color: #999;">
Turnning
</p>
</div>
</div>
</body>
</html>

JQuery翻页效果