<!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.bookblock.js和css3制作的实现翻页(翻书)效果的插件。用户通过导航按钮可以前后翻页，翻页过渡效果十分平滑逼真。该翻书效果支持左右和上下翻页。
jBooklet是一个jQuery的工具在网页上显示翻书动画效果的插件。演示地址：http://www.jq22.com/jquery-info402
Jquery 实现时钟翻页效果 效果还可以，
左右翻页效果的jquery 很绚丽的相册效果
jquery单面翻页效果 $("#g1").jFlip(300,300,{background:"green",cornersTop:false}). bind("flip.jflip",function(event,index,total){ $("#l1").html("Image "+(index+1)+" of "+total); });
Jquery实现简单的书本翻页效果_电纸书翻书效果 Jquery实现简单的书本翻页效果_电纸书翻书效果
jQuery响应式翻页效果 jQuery响应式书本翻页效果网页特效.zip
turnjs--Jquery图书翻页效果
康辉国际旅行社--简单实用Jquery杂志翻页效果,自己亲自调试可以正常使用
jquery html5手机端翻书效果_手指滑动书本翻页效果代码
数字动态翻页效果,实现数据动态翻页效果，直接饮用js，添加div即可。方便快捷
有层次感层叠在一起的图片前后翻切换特效，js图片展示，前后轮番那种图片过渡效果，在支持CSS3的浏览器比如火狐或Chrome中有更好的效果。切换时候是从下向上翻页切换，动画效果做的不错哦。
这是一个应用Jquery实现的电子图书翻页效果模板，希望可以帮助到大家
jQuery图片叠加翻页效果
使用jQuery实现的网页笔记本翻页效果，可以直接插入网页代码使用
用booklet插件做的翻页效果demo，借鉴了网上寻找的资源，加以完善和修改，文件解压后，双击index.html即可打开，纯js+css控制。
这是一款支持移动触摸的jQuery书本翻页特效。该特效通过简单的css和js代码，既可以生成书本或杂志翻页的炫酷3D特效。
jQuery仿书本翻页预览动画特效，电子杂志书本翻页预览效果，点击左边往前翻页，点击右边往后翻页。
基于jquery实现杂志翻页效果.zip