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程序设计有所帮助。
赞 (0)
相关推荐
-
jQuery实现按键盘方向键翻页特效
1.jQuery代码: 复制代码 代码如下: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); var nextpage=$("#next").attr("href"); $("body").keydown(function(event){ if(event.keyCode==37 &am
-
jquery实现的点击翻书效果代码
本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-cha-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
-
jquery实现键盘左右翻页特效
jquery键盘左右翻页,jquery键盘方向键翻页功能,当无上一篇或者下一篇的时候,按键盘将会没什么反应,避免错误跳转. HTML代码 <p>上一篇:<a id='pre' href='http://www.daimajiayuan.com/sitejs-17294-1.html'>一款随滚动条下滑左右渐入的页面布局</a> </p> <p>下一篇:<a id='next' href='http://www.daimajiayuan.co
-
通过pjax实现无刷新翻页(兼容新版jquery)
pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html 目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用. pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术. 同时支持了缓存和本地存储,下次访问的时候直接读取本地
-
Jquery：ajax实现翻页无刷新功能代码
不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action
-
使用jQuery.fn自定义jQuery翻页插件
第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数
-
jquery实现图片翻页效果
复制代码 代码如下: $(function($){ $.fn.changeList = function(options){ var defaults = { tag : 'li', // tab name subName : '.utilTabSub', // sub class name eventType : 'click', // event type num : 4, showType : 'show' // show effect type }, opts = $.extend({}
-
封装的jquery翻页滚动(示例代码)
HTML结构: 复制代码 代码如下: ul._rollSe{width:100px;height:300px;over-flow:hidden} ul._rollSe li._rollPar{height:100px;border:1px solid #369} 复制代码 代码如下: <div class="_rollParent"> <ul class="_rollPageSe"> <li class="_rollpa
-
jQuery实现点击图片翻页展示效果的方法
本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q
-
JQuery插件iScroll实现下拉刷新，滚动翻页特效
JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
-
使用jQueryMobile实现滑动翻页效果的方法
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢