jquery带翻页动画的电子杂志代码分享


Posted in Javascript onAugust 21, 2015

这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐?

记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真。今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果。书本的内容支持任意HTML元素,相当灵活。

运行效果图                         --------------------------------查看效果 下载源码------------------------------------

jquery带翻页动画的电子杂志代码分享

为大家分享的jquery带翻页动画的电子杂志代码如下

<head>
    <title>jQuery书本翻页动画效果DEMO演示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 <script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
 <script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
 <link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
 <script src="cufon/cufon-yui.js" type="text/javascript"></script>
 <script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
 <script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
  Cufon.replace('h1,p,.b-counter');
  Cufon.replace('.book_wrapper a', {hover:true});
  Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
  Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
  Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
 </script>
  </head>
  <body>

 
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
 <div class="book_wrapper">
  <a id="next_page_button"></a>
  <a id="prev_page_button"></a>
  <div id="loading" class="loading">Loading pages...</div>
  <div id="mybook" style="display:none;">
  <div class="b-load">
   <div>
   <img src="images/1.jpg" alt=""/>
   <h1>Slider Gallery</h1>
   <p>This tutorial is about creating a creative gallery with a
    slider for the thumbnails. The idea is to have an expanding
    thumbnails area which opens once an album is chosen.
    The thumbnails will scroll to the end and move back to
    the first image. The user can scroll through the thumbnails
    by using the slider controls. When a thumbnail is clicked,
    it moves to the center and the full image preview opens.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/2.jpg" alt="" />
   <h1>Animated Portfolio Gallery</h1>
   <p>Today we will create an animated portfolio gallery with jQuery.
    The gallery will contain a scroller for thumbnails and a
    content area where we will display details about the portfolio
    item. The image can be enlarged by clicking on it, making
    it appear as an overlay.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/3.jpg" alt="" />
   <h1>Annotation Overlay Effect</h1>
   <p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
    items of a web designers portfolio. We got the idea from the wonderful
    portfolio of www.rareview.com where Flash is used to create the
    effect. We will use jQuery.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/4.jpg" alt="" />
   <h1>Bubbleriffic Image Gallery</h1>
   <p>In this tutorial we will create a bubbly image gallery that
    shows your images in a unique way. The idea is to show the
    thumbnails of albums in a rounded fashion allowing the
    user to scroll them automatically by moving the mouse.
    Clicking on a thumbnail will zoom in a big circle and
    the full image which will be automatically resized to
    fit into the screen.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/5.jpg" alt="" />
   <h1>Collapsing Site Navigation</h1>
   <p>Today we will create a collapsing menu that contains vertical
    navigation bars and a slide out content area. When hovering
    over a menu item, an image slides down from the top and a
    submenu slides up from the bottom. Clicking on one of the
    submenu items will make the whole menu collapse like a card
    deck and the respective content area will slide out.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/6.jpg" alt="" />
   <h1>Custom Animation Banner</h1>
   <p>In today's tutorial we will be creating a custom animation banner with jQuery.
    The idea is to have different elements in a banner that will
    animate step-wise in a custom way.</p>
   <p>We will be using the jQuery Easing Plugin and the jQuery 2D
    Transform Plugin to create some nifty animations.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/7.jpg" alt="" />
   <h1>Full Page Image Gallery</h1>
   <p>In this tutorial we are going to create a stunning full page
    gallery with scrollable thumbnails and a scrollable full
    screen preview. The idea is to have a thumbnails bar at
    the bottom of the page that scrolls automatically when
    the user moves the mouse. When a thumbnail is clicked,
    it moves to the center of the page and the full screen
    image is loaded in the background.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/8.jpg" alt="" />
   <h1>Hover Slide Effect</h1>
   <p>Today we will create a neat effect with some images using
    jQuery. The main idea is to have an image area with several
    images that slide out when we hover over them, revealing
    other images. The sliding effect will be random, i.e.
    the images will slide to the top or bottom, left or
    right, fading out or not. When we click on any area,
    all areas will slide their images out.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/9.jpg" alt="" />
   <h1>Merging Image Boxes</h1>
   <p>Today we will show you a nice effect for images with jQuery.
    The idea is to have a set of rotated thumbnails that,
    once clicked, animate to form the selected image.
    You can navigate through the images with previous
    and next buttons and when the big image gets clicked
    it will scatter into the little box shaped thumbnails again.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/10.jpg" alt="" />
   <h1>Compact News Previewer</h1>
   <p>Today we will create a news previewer that let's you
    show your latest articles or news in a compact way.
    The news previewer will show some list of articles
    on the left side and the preview of the article with a
    longer description on the right. Once a news on the left
    is clicked, the preview will slide in.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/11.jpg" alt="" />
   <h1>Overlay Effect Menu</h1>
   <p>In this tutorial we are going to create a simple menu
    that will stand out once we hover over it by covering
    everything except the menu with a dark overlay.
    The menu will stay white and a submenu area will
    expand. We will create this effect using jQuery.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/12.jpg" alt="" />
   <h1>Polaroid Photobar Gallery</h1>
   <p>In this tutorial we are going to create an image gallery
    with a Polaroid look. We will have albums that will expand
    to sets of slightly rotated thumbnails that pop out on hover.
    The full image will slide in from the bottom once a thumbnail
    is clicked. In the full image view the user can navigate
    through the pictures or simply choose another thumbnail
    to be displayed.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/13.jpg" alt="" />
   <h1>Pull Out Content Panel</h1>
   <p>In this tutorial we will create a content panel that 
    slides out at a predefined scroll position. It will 
    reveal a teaser with related content and it can be 
    expanded to full page size to show more. A custom 
    slider allows to scroll through many items in the 
    panel.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
   <div>
   <img src="images/14.jpg" alt="" />
   <h1>Thumbnails Navigation Gallery</h1>
   <p>In this tutorial we are going to create an extraordinary
    gallery with scrollable thumbnails that slide out from a
    navigation. We are going to use jQuery and some CSS3
    properties for the style. The main idea is to have a
    menu of albums where each item will reveal a horizontal
    bar with thumbnails when clicked.</p>
   <a href="#" class="article">Article</a>
   <a href="#" class="demo">Demo</a>
   </div>
  </div>
  </div>
 </div>

    <!-- The JavaScript -->

    <script type="text/javascript">
  $(function() {
  var $mybook  = $('#mybook');
  var $bttn_next = $('#next_page_button');
  var $bttn_prev = $('#prev_page_button');
  var $loading = $('#loading');
  var $mybook_images = $mybook.find('img');
  var cnt_images = $mybook_images.length;
  var loaded  = 0;
  //preload all the images in the book,
  //and then call the booklet plugin

  $mybook_images.each(function(){
   var $img = $(this);
   var source = $img.attr('src');
   $('<img/>').load(function(){
   ++loaded;
   if(loaded == cnt_images){
    $loading.hide();
    $bttn_next.show();
    $bttn_prev.show();
    $mybook.show().booklet({
    name:        null,              // name of the booklet to display in the document title bar
    width:       800,               // container width
    height:       500,               // container height
    speed:       600,               // speed of the transition between pages
    direction:     'LTR',              // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
    startingPage:    0,                // index of the first page to be displayed
    easing:       'easeInOutQuad',         // easing method for complete transition
    easeIn:       'easeInQuad',          // easing method for first half of transition
    easeOut:      'easeOutQuad',          // easing method for second half of transition

    closed:       true,              // start with the book "closed", will add empty pages to beginning and end of book
    closedFrontTitle:  null,              // used with "closed", "menu" and "pageSelector", determines title of blank starting page
    closedFrontChapter: null,              // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
    closedBackTitle:  null,              // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
    closedBackChapter: null,              // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
    covers:       false,              // used with "closed", makes first and last pages into covers, without page numbers (if enabled)

    pagePadding:    10,               // padding for each page wrapper
    pageNumbers:    true,              // display page numbers on each page

    hovers:       false,              // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
    overlays:      false,              // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
    tabs:        false,              // adds tabs along the top of the pages
    tabWidth:      60,               // set the width of the tabs
    tabHeight:     20,               // set the height of the tabs
    arrows:       false,              // adds arrows overlayed over the book edges
    cursor:       'pointer',            // cursor css setting for side bar areas

    hash:        false,              // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
    keyboard:      true,              // enables navigation with arrow keys (left: previous, right: next)
    next:        $bttn_next,       // selector for element to use as click trigger for next page
    prev:        $bttn_prev,       // selector for element to use as click trigger for previous page

    menu:        null,              // selector for element to use as the menu area, required for 'pageSelector'
    pageSelector:    false,              // enables navigation with a dropdown menu of pages, requires 'menu'
    chapterSelector:  false,              // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

    shadows:      true,              // display shadows on page animations
    shadowTopFwdWidth: 166,               // shadow width for top forward anim
    shadowTopBackWidth: 166,               // shadow width for top back anim
    shadowBtmWidth:   50,               // shadow width for bottom shadow

    before:       function(){},          // callback invoked before each page turn animation
    after:       function(){}           // callback invoked after each page turn animation
    });
    Cufon.refresh();
   }
   }).attr('src',source);
  });
  
  });
    </script>
 
  </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
实现两个文本框同时输入的实例
Sep 25 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 #Javascript
纯javascript实现图片延时加载方法
Aug 21 #Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 #Javascript
js变形金刚文字特效代码分享
Aug 20 #Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 #Javascript
JS实现的通用表单验证插件完整实例
Aug 20 #Javascript
jquery Easyui快速开发总结
Aug 20 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php smarty模板引擎的6个小技巧
2014/04/24 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
numpy中的高维数组转置实例
2018/04/17 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
基于python实现雪花算法过程详解
2019/11/16 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
.NET常见笔试题集
2012/12/01 面试题
2014大学生全国两会学习心得体会
2014/03/13 职场文书
公司业务员管理制度
2015/08/05 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书