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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

3d jquery 翻页

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

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

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

为大家分享的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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7626

CakePHP 教程

1389

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

140

显示更多

Related knowledge

CLIP-BEVFormer：显式监督BEVFormer结构，提升长尾检测性能 Mar 26, 2024 pm 12:41 PM

写在前面&笔者的个人理解目前，在整个自动驾驶系统当中，感知模块扮演了其中至关重要的角色，行驶在道路上的自动驾驶车辆只有通过感知模块获得到准确的感知结果后，才能让自动驾驶系统中的下游规控模块做出及时、正确的判断和行为决策。目前，具备自动驾驶功能的汽车中通常会配备包括环视相机传感器、激光雷达传感器以及毫米波雷达传感器在内的多种数据信息传感器来收集不同模态的信息，用于实现准确的感知任务。基于纯视觉的BEV感知算法因其较低的硬件成本和易于部署的特点，以及其输出结果能便捷地应用于各种下游任务，因此受到工业

$牛津大学最新！Mickey：3D中的2D图像匹配SOTA！(CVPR\'24)$ 牛津大学最新！Mickey：3D中的2D图像匹配SOTA！(CVPR\'24) Apr 23, 2024 pm 01:20 PM

写在前面项目链接：https://nianticlabs.github.io/mickey/给定两张图片，可以通过建立图片之间的对应关系来估计它们之间的相机姿态。通常，这些对应关系是二维到二维的，而我们估计的姿态在尺度上是不确定的。一些应用，例如随时随地实现即时增强现实，需要尺度度量的姿态估计，因此它们依赖于外部的深度估计器来恢复尺度。本文提出了MicKey，这是一个关键点匹配流程，能够够预测三维相机空间中的度量对应关系。通过学习跨图像的三维坐标匹配，我们能够在没有深度测试的情况下推断出度量相对

LLM全搞定！OmniDrive：集3D感知、推理规划于一体（英伟达最新） May 09, 2024 pm 04:55 PM

写在前面&笔者的个人理解这篇论文致力于解决当前多模态大语言模型（MLLMs）在自动驾驶应用中存在的关键挑战，即将MLLMs从2D理解扩展到3D空间的问题。由于自动驾驶车辆（AVs）需要针对3D环境做出准确的决策，这一扩展显得尤为重要。3D空间理解对于AV来说至关重要，因为它直接影响车辆做出明智决策、预测未来状态以及与环境安全互动的能力。当前的多模态大语言模型（如LLaVA-1.5）通常仅能处理较低分辨率的图像输入（例如），这是由于视觉编码器的分辨率限制，LLM序列长度的限制。然而，自动驾驶应用需

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

3D视觉绕不开的点云配准！一文搞懂所有主流方案与挑战 Apr 02, 2024 am 11:31 AM

作为点集合的点云有望通过3D重建、工业检测和机器人操作中，在获取和生成物体的三维（3D）表面信息方面带来一场改变。最具挑战性但必不可少的过程是点云配准，即获得一个空间变换，该变换将在两个不同坐标中获得的两个点云对齐并匹配。这篇综述介绍了点云配准的概述和基本原理，对各种方法进行了系统的分类和比较，并解决了点云配准中存在的技术问题，试图为该领域以外的学术研究人员和工程师提供指导，并促进对点云配准统一愿景的讨论。点云获取的一般方式分为主动和被动方式，由传感器主动获取的点云为主动方式，后期通过重建的方式

牛津大学最新 | 近400篇总结！畅谈大语言模型与三维世界最新综述 Jun 02, 2024 pm 07:41 PM

写在前面&笔者的个人理解随着大型语言模型（LLM）的发展，它们与3D空间数据（3DLLM）之间的集成取得了快速进展，为理解物理空间和与物理空间交互提供了前所未有的能力。本文全面概述了LLM处理、理解和生成3D数据的方法。我们强调了LLM的独特优势，如上下文学习、逐步推理、开放词汇能力和广泛的世界知识，并强调了它们与嵌入式人工智能（AI）系统中显示推进空间理解和互动的潜力。我们的研究涵盖了从点云到神经渲染场（NeRF）的各种3D数据表示。并分析了它们与LLM的集成，用于3D场景理解、字幕、

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题