好看的翻页切换效果插件-BOOKLET

http://www.sd131.com/jquery-info43

Booklet 为我们提供了一种漂亮的切换两个div的翻页效果。

插件信息

官网：http://builtbywill.com/code/booklet/

Demo：http://builtbywill.com/code/booklet/

预览图

使用步骤

1、引入以下的js和css文件

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type = "text/javascript" ></ script >
< script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js" type = "text/javascript" ></ script >
< script src = "booklet/jquery.easing.1.3.js" type = "text/javascript" ></ script >
< script src = "booklet/jquery.booklet.1.4.0.min.js" type = "text/javascript" ></ script >
< link href = "booklet/jquery.booklet.1.4.0.css" type = "text/css" rel = "stylesheet" media = "screen, projection, tv" >

2、在head标签中加入以下js代码

$(function() {
    //single book
    $('#mybook').booklet();

    //multiple books with ID's
    $('#mybook1, #mybook2').booklet();

    //multiple books with a class
    $('.mycustombooks').booklet();
});

3、在body标签中加入以下格式的html代码

< 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 >

参数配置

参数比较多，我在这儿就不讲了，请到这里：http://builtbywill.com/code/booklet/documentation 查看详细的参数解析。

下载地址

官方下载： http://builtbywill.com/code/booklet/src/jquery.booklet.1.4.0.zip
网盘下载： http://pan.baidu.com/share/link?shareid=231075&uk=2166814920