注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery翻书插件booklet

UI fishcity 3098浏览

jquery翻书效果booklet

Booklet是一个基于jQuery库的实现网页上翻书动画效果的插件,在jBooklet页面上可以写任何支持html的内容,而软件设置相当简单,就算是什么都没设置,采用默认值,效果都非常的棒。下面jQ酷和大家一起来看下它的用法吧。

引入CSS样式文件

<link href="booklet/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />

引入JS核心文件

<!-- jQuery -->
<script src="//ajax.useso.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>

<!-- jQuery UI (optional) -->
<script src="//ajax.useso.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.custom.min.js"><\/script>') </script>

<!-- Booklet -->
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.min.js"></script>

构建html,创建booklet必须把内容写在jbooklet页面上。

1、建立一个容器DIV,然后设定一个ID或是CLASS

2、在容器内建立页面,booklet会自动识别容器内DIV亲子项作为一个页面

<div id="mybook">
    <div> 
        <h3>Yay, Page 1!</h3>
    </div>
    <div> 
        <h3>Yay, Page 2!</h3>
    </div>
    <div> 
        <h3>Yay, Page 3!</h3>
    </div>
    <div> 
        <h3>Yay, Page 4!</h3>
    </div>
</div>

写JS初始化插件,使用jquery的选择器初始化booklet,如果页面中有多个相同的ID或class被选中初始化,那么页面将会建立多个相同的翻页效果

$(function() {
    //single book
    $('#mybook').booklet();
    
    //multiple books with ID's
    $('#mybook1, #mybook2').booklet();
    
    //multiple books with a class
    $('.mycustombooks').booklet();
});

更多的参数设置请参考官方文档

转载请注明:jQ酷 » jQuery翻书插件booklet

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。