javascript 翻书效果,其效果还不错

javascript 翻书效果

演示效果:



调用代码:

<div id="flipbook">
	<div class="hard"> Turn.js </div>
	<div class="hard"></div>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
	<div> Page 4 </div>
	<div class="hard"></div>
	<div class="hard"></div>
</div>
<script type="text/javascript">
	$("#flipbook").turn({
		width: 400,
		height: 300,
		autoCenter: true
	});
</script>



源码下载

http://www.turnjs.com/

Turn.js 是一个基于 jQuery 的插件,可以实现网页版的翻书效果。它支持多种设备,包括桌面浏览器、平板电脑和移动设备。通过 Turn.js,可以实现类似于纸质书籍的翻页效果,同时还可以添加书签、目录等功能。 以下是使用 Turn.js 实现翻书效果和添加目录的简单步骤: 1. 引入 Turn.js 插件及其依赖库(jQuery 和 turn.min.js): ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="path/to/turn.min.js"></script> ``` 2. 创建一个包含书页内容的容器: ```html <div id="flipbook"> <div class="page">Page 1</div> <div class="page">Page 2</div> <div class="page">Page 3</div> <div class="page">Page 4</div> </div> ``` 3. 初始化 Turn.js 插件: ```javascript $("#flipbook").turn({ width: 800, // 容器宽度 height: 600, // 容器高度 autoCenter: true // 自动居中 }); ``` 4. 添加目录: ```javascript // 定义目录项 var pages = [ {name: "Page 1", page: 1}, {name: "Page 2", page: 2}, {name: "Page 3", page: 3}, {name: "Page 4", page: 4} ]; // 创建目录容器 var $bookmarks = $("<ul/>", {"class": "bookmarks"}); // 添加目录项 $.each(pages, function(index, page) { $("<li/>") .html("<a href='#' data-page='" + page.page + "'>" + page.name + "</a>") .appendTo($bookmarks); }); // 插入到页面中 $bookmarks.appendTo($("#flipbook")); // 绑定目录项的点击事件 $(".bookmarks a").on("click", function() { var page = $(this).data("page"); $("#flipbook").turn("page", page); return false; }); ``` 通过以上步骤,就可以实现基本的翻书效果和目录功能。如果需要更多的自定义样式和交互效果,可以参考 Turn.js 的官方文档进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值