以下是 jquery带翻页动画的电子杂志特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带翻页动画的电子杂志</title>
<script type="text/javascript" src="booklet/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="booklet/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="booklet/jquery.booklet.1.1.0.min.js"></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"/>
</head>
<body>
<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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" 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="#" target="_blank" class="article">Article</a>
<a href="#" target="_blank" class="demo">Demo</a>
</div>
</div>
</div>
</div>
<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
});
}
}).attr('src',source);
});
});
</script>
</body>
</html>
JS代码(jquery.booklet.1.1.0.js):
/* * jQuery Booklet Plugin * Copyright (c) 2010 W. Grauvogel (http://builtbywill.com/) * * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version:1.1.0 * * Originally based on the work of:*1) Charles Mangin (http://clickheredammit.com/pageflip/) */
;
(function($){
$.fn.booklet = function(options){
var o = $.extend({
}
,$.fn.booklet.defaults,options);
return $(this).each(function(){
var command,config,obj,id,i,target;
//option type string - api callif(typeof options == 'string'){
//check if booklet has been initialized if($(this).data('booklet')){
command = options.toLowerCase();
obj = $.fn.booklet.interfaces[$(this).data('id')];
if(command == 'next'){
obj.next()}
else if(command == 'prev'){
obj.prev()}
}
}
//option type number - api callelse if(typeof options == 'number'){
//check if booklet has been initialized if($(this).data('booklet')){
target = options;
obj = $.fn.booklet.interfaces[$(this).data('id')];
if(target % 2 != 0){
target-= 1;
}
obj.gotoPage(target);
}
}
//else build new bookletelse{
config = $.extend(true,{
}
,o);
// Determine ID (Reuse array slots if possible)id = $.fn.booklet.interfaces.length;
for(i = 0;
i < id;
i++){
if(typeof $.fn.booklet.interfaces[i] == 'undefined'){
id = i;
break;
}
}
// Instantiate the bookletobj = new booklet($(this),config,id);
// Add API references$.fn.booklet.interfaces[id] = obj;
}
}
);
}
function booklet(target,options,id){
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VARS + STRUCTURE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////var self,opts,b,src,hash,i,j,p,diff,busy,init,rhover,lhover,titles = new Array(),chapters = new Array(),pN,p0,p1,p2,p3,p4,pNwrap,p0wrap,p1wrap,p2wrap,p3wrap,p4wrap,wraps,sF,sB,overlays,overlayN,overlayP,tabs,tabN,tabP,arrows,arrowN,arrowP,next,prev,ctrlsN,ctrlsP,menu,chapter,dd,ddUL,ddH,ddLI,ddA,ddT,ddC,ddCUL,ddCH,ddCLI,ddCA,ddCT,empty = '<div class="b-page-empty" title="" rel=""></div>',blank = '<div class="b-page-blank" title="" rel=""></div>';
busy = false;
init = false;
rhover = lhover = false;
self = this;
self.options = options;
self.id = id;
self.hash = '';
opts = self.options;
b = target.addClass('booklet');
src = b.children('.b-load');
//save page titles and chapter names,add page numbersinitPages();
//store data for api callsb.data('booklet',true);
b.data('id',id);
b.data('total',src.children().length);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// SETUP OPTIONS/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////set width + heightif(!opts.width){
opts.width = b.width();
}
if(!opts.height){
opts.height = b.height();
}
b.width(opts.width);
b.height(opts.height);
//save page sizes and other varsopts.pWidth = opts.width/2;
opts.pWidthN = '-'+(opts.width/2)+'px';
opts.pWidthH = opts.width/4;
opts.pHeight = opts.height;
opts.pTotal = src.children().length;
opts.speedH = opts.speed/2;
//set startingPageif(opts.direction == 'LTR'){
opts.curr = 0;
}
else if(opts.direction == 'RTL'){
opts.curr = opts.pTotal-2;
}
if(!isNaN(opts.startingPage) && opts.startingPage <= opts.pTotal && opts.startingPage > 0){
if((opts.startingPage % 2) != 0){
opts.startingPage--}
;
opts.curr = opts.startingPage;
}
//set booklet opts.nameif(opts.name){
document.title = opts.name;
}
else{
opts.name = document.title;
}
//save shadow widths for animif(opts.shadows){
opts.shadowTopFwdWidth = '-'+opts.shadowTopFwdWidth+'px';
opts.shadowTopBackWidth = '-'+opts.shadowTopBackWidth+'px';
}
//setup menuif(opts.menu){
menu = $(opts.menu).addClass('b-menu');
p = opts.curr;
//setup page selctorif(opts.pageSelector){
//add selectordd = $('<div class="b-selector b-selector-page"><span class="b-current">'+ (p+1) +' - '+ (p+2) +'</span></div>').appendTo(menu);
ddUL = $('<ul></ul>').appendTo(dd).empty().css('height','auto');
//loop through all pagesfor(i=0;
i < opts.pTotal;
i+=2){
j = i;
//nums for normal viewnums = (j+1) +'-'+ (j+2);
if(opts.closed){
//nums for closed bookj--;
if(i==0){
nums='1'}
else if(i==opts.pTotal-2){
nums=opts.pTotal-2}
else{
nums = (j+1) +'-'+ (j+2);
}
//nums for closed book with coversif(opts.covers){
j--;
if(i==0){
nums=''}
else if(i==opts.pTotal-2){
nums=''}
else{
nums = (j+1) +'-'+ (j+2);
}
}
}
//nums for RTL directionif(opts.direction == 'RTL'){
nums = (Math.abs(j - opts.pTotal)-1) +' - '+ ((Math.abs(j - opts.pTotal)));
if(opts.closed){
if(i==opts.pTotal-2){
nums='1'}
else if(i==0){
nums=opts.pTotal-2}
else{
nums = (Math.abs(j - opts.pTotal)-3) +' - '+ ((Math.abs(j - opts.pTotal)-2));
}
if(opts.covers){
if(i==opts.pTotal-2){
nums=''}
else if(i==0){
nums=''}
else{
nums = (Math.abs(j - opts.pTotal)-5) +' - '+ ((Math.abs(j - opts.pTotal)-4));
}
}
}
dd.find('.b-current').text(nums);
ddLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ titles[i+1] +'</span><span class="b-num">'+ nums +'</span></a></li>').prependTo(ddUL);
}
else{
if(i==0){
dd.find('.b-current').text(nums);
}
ddLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ titles[i] +'</span><span class="b-num">'+ nums +'</span></a></li>').appendTo(ddUL);
}
ddA = ddLI.find('a');
if(!opts.hash){
ddA.click(function(){
if(opts.direction == 'RTL'){
dd.find('.b-current').text($(this).find('.b-num').text());
}
ddT = parseInt($(this).attr('id').replace('selector-page-',''));
self.gotoPage(ddT);
return false;
}
);
}
}
//set heightddH = ddUL.height();
ddUL.css({
'height':0,'padding-bottom':0}
);
//add hover effectsdd.unbind('hover').hover(function(){
ddUL.stop().animate({
height:ddH,paddingBottom:10}
,500);
}
,function(){
ddUL.stop().animate({
height:0,paddingBottom:0}
,500);
}
);
}
//setup chapter selctorif(opts.chapterSelector){
chapter = chapters[opts.curr];
if(chapter == ""){
chapter = chapters[opts.curr+1];
}
ddC = $('<div class="b-selector b-selector-chapter"><span class="b-current">'+chapter+'</span></div>').appendTo(menu);
ddCUL = $('<ul></ul>').appendTo(ddC).empty().css('height','auto');
for(i=0;
i < opts.pTotal;
i+=1){
if(chapters[i] != "" && typeof chapters[i] != "undefined"){
if(opts.direction == 'RTL'){
j = i;
if(j % 2 != 0){
j--;
}
ddC.find('.b-current').text(chapters[i]);
ddCLI = $('<li><a href="#/page/'+ (j+1) +'" id="selector-page-'+(j)+'"><span class="b-text">'+ chapters[i] +'</span></a></li>').prependTo(ddCUL);
}
else{
ddCLI = $('<li><a href="#/page/'+ (i+1) +'" id="selector-page-'+i+'"><span class="b-text">'+ chapters[i] +'</span></a></li>').appendTo(ddCUL);
}
ddCA = ddCLI.find('a');
if(!opts.hash){
ddCA.click(function(){
if(opts.direction == 'RTL'){
ddC.find('.b-current').text($(this).find('.b-text').text());
}
ddCT = parseInt($(this).attr('id').replace('selector-page-',''));
self.gotoPage(ddCT);
return false;
}
);
}
}
}
ddCH = ddCUL.height();
ddCUL.css({
'height':0,'padding-bottom':0}
);
ddC.unbind('hover').hover(function(){
ddCUL.stop().animate({
height:ddCH,paddingBottom:10}
,500);
}
,function(){
ddCUL.stop().animate({
height:0,paddingBottom:0}
,500);
}
);
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// API METHODS///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////$.extend(self,{
next:function(){
if(!busy){
self.gotoPage(opts.curr+2);
}
}
,prev:function(){
if(!busy){
self.gotoPage(opts.curr-2);
}
}
,gotoPage:function(num){
//moving forward (increasing number)if(num > opts.curr && num < opts.pTotal && num >= 0 && !busy){
busy = true;
diff = num - opts.curr;
opts.curr = num;
opts.before.call(self,opts);
updatePager();
updateCtrls();
updateHash(opts.curr+1,opts);
initAnim(diff,true,sF);
//hide p2 as p3 moves across itp2.stop().animate({
width:0}
,opts.speedH,opts.easeIn);
//animate p3 from right to left (left:movement,width:reveal slide,paddingLeft:shadow underneath)//call setuppages at end of animation to reset pagesp3.stop().animate({
left:opts.pWidthH,width:opts.pWidthH,paddingLeft:opts.shadowBtmWidth}
,opts.speedH,opts.easeIn) .animate({
left:0,width:opts.pWidth,paddingLeft:0}
,opts.speedH);
p3wrap.animate({
left:opts.shadowBtmWidth}
,opts.speedH,opts.easeIn) .animate({
left:0}
,opts.speedH,opts.easeOut,function(){
updateAfter()}
);
//moving backward (decreasing number)}
else if(num < opts.curr && num < opts.pTotal && num >= 0 && !busy){
busy = true;
diff = opts.curr - num;
opts.curr = num;
opts.before.call(self,opts);
updatePager();
updateCtrls();
updateHash(opts.curr+1,opts);
initAnim(diff,false,sB);
//hide p1 as p0 moves across itp1.animate({
left:opts.pWidth,width:0}
,opts.speed,opts.easing);
p1wrap.animate({
left:opts.pWidthN}
,opts.speed,opts.easing);
//animate p0 from left to right (right:movement,width:reveal slide,paddingLeft:shadow underneath)p0.animate({
left:opts.pWidthH,width:opts.pWidthH}
,opts.speedH,opts.easeIn) .animate({
left:opts.pWidth,width:opts.pWidth}
,opts.speedH,opts.easeOut);
//animate .wrapper content with p0 to keep content right aligned throughout//call setuppages at end of animation to reset pagesp0wrap.animate({
right:opts.shadowBtmWidth}
,opts.speedH,opts. easeIn) .animate({
right:0}
,opts.speedH,opts.easeOut,function(){
updateAfter()}
);
}
}
}
);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// SETUP CONTROLS/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////add prev next user defined controlsif(opts.next){
next = $(opts.next);
next.click(function(e){
e.preventDefault();
self.next();
}
);
}
if(opts.prev){
prev = $(opts.prev);
prev.click(function(e){
e.preventDefault();
self.prev();
}
);
}
//add overlaysif(opts.overlays){
overlayP = $('<div class="b-overlay b-overlay-prev b-prev" title="Previous Page"></div>').appendTo(b);
overlayN = $('<div class="b-overlay b-overlay-next b-next" title="Next Page"></div>').appendTo(b);
overlays = b.find('.b-overlay');
if ($.browser.msie){
overlays.css({
'background':'#fff','filter':'progid:DXImageTransform.Microsoft.Alpha(opacity=0) !important'}
);
}
}
//add tabsif(opts.tabs){
tabP = $('<div class="b-tab b-tab-prev b-prev" title="Previous Page">Previous</div>').appendTo(b);
tabN = $('<div class="b-tab b-tab-next b-next" title="Next Page">Next</div>').appendTo(b);
tabs = b.find('.b-tab');
if(opts.tabWidth){
tabs.width(opts.tabWidth);
}
if(opts.tabHeight){
tabs.height(opts.tabHeight);
}
tabs.css({
'top':'-'+tabN.outerHeight()+'px'}
);
b.css({
'marginTop':tabN.outerHeight()}
);
//update ctrls for RTL directionif(opts.direction == 'RTL'){
tabN.html('Previous').attr('title','Previous Page');
tabP.html('Next').attr('title','Next Page');
}
}
else{
b.css({
'marginTop':0}
);
}
//add arrowsif(opts.arrows){
arrowP = $('<div class="b-arrow b-arrow-prev b-prev" title="Previous Page"><div>Previous</div></div>').appendTo(b);
arrowN = $('<div class="b-arrow b-arrow-next b-next" title="Next Page"><div>Next</div></div>').appendTo(b);
arrows = b.find('.b-arrow');
//update ctrls for RTL directionif(opts.direction == 'RTL'){
arrowN.html('<div>Previous</div>').attr('title','Previous Page');
arrowP.html('<div>Next</div>').attr('title','Next Page');
}
}
//save all "b-prev" and "b-next" controlsctrlsN = b.find('.b-next');
ctrlsP = b.find('.b-prev');
//add click actionsctrlsN.click(function(e){
e.preventDefault();
self.next();
}
);
ctrlsP.click(function(e){
e.preventDefault();
self.prev();
}
);
//add page hover animationsif(opts.hovers){
ctrlsN.hover(function(){
if(!busy && opts.curr+2 <= opts.pTotal-2){
//animatep2.stop().animate({
'width':opts.pWidth-40}
,500,opts.easing);
p3.stop().animate({
'left':opts.width-40,'width':20,paddingLeft:10}
,500,opts.easing);
rhover = true;
}
}
,function(){
if(!busy && opts.curr+2 <= opts.pTotal-2){
p2.stop().animate({
'width':opts.pWidth}
,500,opts.easing);
p3.stop().animate({
'left':opts.width,'width':0,paddingLeft:0}
,500,opts.easing);
rhover = false;
}
}
);
ctrlsP.hover(function(){
if(!busy && opts.curr-2 >= 0){
//animatep1.stop().animate({
left:10,width:opts.pWidth-10}
,400,opts.easing);
p1wrap.stop().animate({
left:"-10px"}
,400,opts.easing);
p0.stop().animate({
left:10,width:40}
,400,opts.easing);
p0wrap.stop().animate({
right:10}
,400,opts.easing);
lhover = true;
}
}
,function(){
if(!busy && opts.curr-2 >= 0){
p1.stop().animate({
left:0,width:opts.pWidth}
,400,opts.easing);
p1wrap.stop().animate({
left:0}
,400,opts.easing);
p0.stop().animate({
left:0,width:0}
,400,opts.easing);
p0wrap.stop().animate({
right:0}
,400,opts.easing);
lhover = false;
}
}
);
}
//arrow animationsif(opts.arrows){
if($.support.opacity){
ctrlsN.hover(function(){
arrowN.find('div').stop().fadeTo('fast',1);
}
,function(){
arrowN.find('div').stop().fadeTo('fast',0);
}
);
ctrlsP.hover(function(){
arrowP.find('div').stop().fadeTo('fast',1);
}
,function(){
arrowP.find('div').stop().fadeTo('fast',0);
}
);
}
else{
ctrlsN.hover(function(){
arrowN.find('div').show();
}
,function(){
arrowN.find('div').hide();
}
);
ctrlsP.hover(function(){
arrowP.find('div').show();
}
,function(){
arrowP.find('div').hide();
}
);
}
}
//keyboard ctrlsif(opts.keyboard){
//keyboard ctrls$(document).keyup(function(event){
if(event.keyCode == 37){
self.prev();
}
else if(event.keyCode == 39){
self.next();
}
}
);
}
//hash ctrlsif(opts.hash){
setupHash();
clearInterval();
setInterval(function(){
pollHash()}
,250);
}
//first time setupresetPages();
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////General Functions///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////function initPages(){
//fix for odd number of pagesif((src.children().length % 2) != 0){
//if book is closed and using covers,add page before back cover,else after last pageif(opts.closed && opts.covers){
src.children().last().before(blank);
}
else{
src.children().last().after(blank);
}
}
//if closed book,add empty pages to start and endif(opts.closed){
$(empty).attr({
'title':opts.closedFrontTitle || "Beginning",'rel':opts.closedFrontChapter || "Beginning of Book"}
).prependTo(src);
src.children().last().attr({
'title':opts.closedBackTitle || "End",'rel':opts.closedBackChapter || "End of Book"}
);
src.append(empty);
}
if(opts.direction == 'LTR'){
j = 0;
}
else{
j = src.children().length;
if(opts.closed){
j-=2;
}
if(opts.covers){
j-=2;
}
$(src.children().get().reverse()).each(function(){
$(this).appendTo(src);
}
);
}
//save titles and chapterssrc.children().each(function(i){
//save chapter titleif($(this).attr('rel')){
chapters[i] = $(this).attr('rel');
}
else{
chapters[i] = "";
}
//save page titletitles[i] = $(this).attr('title');
//give content the correct wrapper and page wrapperif($(this).hasClass('b-page-empty')){
$(this).wrap('<div class="b-page"><div class="b-wrap"></div></div>');
}
else if(opts.closed && opts.covers && (i == 1 || i == src.children().length-2)){
$(this).wrap('<div class="b-page"><div class="b-wrap b-page-cover"></div></div>');
}
else if(i % 2 != 0){
$(this).wrap('<div class="b-page"><div class="b-wrap b-wrap-right"></div></div>');
}
else{
$(this).wrap('<div class="b-page"><div class="b-wrap b-wrap-left"></div></div>');
}
$(this).parents('.b-page').addClass('b-page-'+i);
//add page numbersif(opts.pageNumbers && !$(this).hasClass('b-page-empty') && (!opts.closed || (opts.closed && !opts.covers) || (opts.closed && opts.covers && i != 1 && i != src.children().length-2))){
if(opts.direction == 'LTR'){
j++;
}
$(this).parent().append('<div class="b-counter">'+(j)+'</div>');
if(opts.direction == 'RTL'){
j--;
}
}
}
);
}
function resetPages(){
//reset all contentb.find('.b-page').removeClass('b-pN b-p0 b-p1 b-p2 b-p3 b-p4').hide();
if(init){
j = opts.pTotal-1;
for(i=0;
i<opts.pTotal;
i++){
b.find('.b-page-'+i).detach().appendTo(src);
}
}
//add page classesif(opts.curr-2 >= 0){
b.find('.b-page-'+(opts.curr-2)).addClass('b-pN').show();
b.find('.b-page-'+(opts.curr-1)).addClass('b-p0').show();
}
b.find('.b-page-'+(opts.curr)).addClass('b-p1').show();
b.find('.b-page-'+(opts.curr+1)).addClass('b-p2').show();
if(opts.curr+3 <= opts.pTotal){
b.find('.b-page-'+(opts.curr+2)).addClass('b-p3').show();
b.find('.b-page-'+(opts.curr+3)).addClass('b-p4').show();
}
//save structure elems to varspN = b.find('.b-pN');
p0 = b.find('.b-p0');
p1 = b.find('.b-p1');
p2 = b.find('.b-p2');
p3 = b.find('.b-p3');
p4 = b.find('.b-p4');
pNwrap = b.find('.b-pN .b-wrap');
p0wrap = b.find('.b-p0 .b-wrap');
p1wrap = b.find('.b-p1 .b-wrap');
p2wrap = b.find('.b-p2 .b-wrap');
p3wrap = b.find('.b-p3 .b-wrap');
p4wrap = b.find('.b-p4 .b-wrap');
wraps = b.find('.b-wrap');
//update csswraps.attr('style','');
wraps.css({
'width':opts.pWidth-(opts.pagePadding*2),'height':opts.pHeight-(opts.pagePadding*2),'padding':opts.pagePadding}
);
p1.css({
'left':0,'width':opts.pWidth,'height':opts.pHeight}
);
p2.css({
'left':opts.pWidth,'width':opts.pWidth,'opacity':1,'height':opts.pHeight}
);
pN.css({
'left':0,'width':opts.pWidth,'height':opts.pHeight}
);
p0.css({
'left':0,'width':0,'height':opts.pHeight}
);
p3.stop().css({
'left':opts.pWidth*2,'width':0,'height':opts.pHeight,paddingLeft:0}
);
p3wrap.stop().css({
'left':0}
);
p4.css({
'left':opts.pWidth,'width':opts.pWidth,'height':opts.pHeight}
);
//update page order for animationsif(opts.curr+3 <= opts.pTotal){
p3.after(p0.detach());
p1.after(p4.detach());
}
else{
p0.detach().appendTo(src);
}
init = true;
//add shadowssF = sB = null;
b.find('.b-shadow-b,.b-shadow-f').remove();
if(opts.shadows){
sF = $('<div class="b-shadow-f"></div>').appendTo(p3).css({
'right':0,'width':opts.pWidth,'height':opts.pHeight}
);
sB = $('<div class="b-shadow-b"></div>').appendTo(p0).css({
'left':0,'width':opts.pWidth,'height':opts.pHeight}
);
}
}
function initAnim(diff,inc,shadow){
//setup contentif(inc && diff > 2){
b.find('.b-p3,.b-p4').removeClass('b-p3 b-p4').hide();
b.find('.b-page-'+opts.curr).addClass('b-p3').show().stop().css({
'left':opts.pWidth*2,'width':0,'height':opts.pHeight,paddingLeft:0}
);
b.find('.b-page-'+(opts.curr+1)).addClass('b-p4').show().css({
'left':opts.pWidth,'width':opts.pWidth,'height':opts.pHeight}
);
b.find('.b-page-'+opts.curr+' .b-wrap').show().css({
'width':opts.pWidth-(opts.pagePadding*2),'height':opts.pHeight-(opts.pagePadding*2),'padding':opts.pagePadding}
);
b.find('.b-page-'+(opts.curr+1)+' .b-wrap').show().css({
'width':opts.pWidth-(opts.pagePadding*2),'height':opts.pHeight-(opts.pagePadding*2),'padding':opts.pagePadding}
);
p3 = b.find('.b-p3');
p4 = b.find('.b-p4');
p3wrap = b.find('.b-p3 .b-wrap');
p4wrap = b.find('.b-p4 .b-wrap');
if(rhover){
p3.css({
'left':opts.width-40,'width':20,'padding-left':10}
);
}
shadow.appendTo(p3);
p1.after(p4.detach());
p2.after(p3.detach());
}
else if(!inc && diff > 2){
b.find('.b-pN,.b-p0').removeClass('b-pN b-p0').hide();
b.find('.b-page-'+opts.curr).addClass('b-pN').show().css({
'left':0,'width':opts.pWidth,'height':opts.pHeight}
);
b.find('.b-page-'+(opts.curr+1)).addClass('b-p0').show().css({
'left':0,'width':0,'height':opts.pHeight}
);
b.find('.b-page-'+opts.curr+' .b-wrap').show().css({
'width':opts.pWidth-(opts.pagePadding*2),'height':opts.pHeight-(opts.pagePadding*2),'padding':opts.pagePadding}
);
b.find('.b-page-'+(opts.curr+1)+' .b-wrap').show().css({
'width':opts.pWidth-(opts.pagePadding*2),'height':opts.pHeight-(opts.pagePadding*2),'padding':opts.pagePadding}
);
pN = b.find('.b-pN');
p0 = b.find('.b-p0');
pNwrap = b.find('.b-pN .b-wrap');
p0wrap = b.find('.b-p0 .b-wrap');
if(lhover){
p0.css({
left:10,width:40}
);
p0wrap.css({
right:10}
);
}
shadow.appendTo(p0);
p0.detach().appendTo(src);
}
//updates if moving to start and end of bookif(opts.closed){
if(!inc && opts.curr == 0){
pN.hide();
}
else if(!inc){
pN.show();
}
if(inc && opts.curr >= opts.pTotal-2){
p4.hide();
}
else if(inc){
p4.show();
}
}
//init shadowsif(opts.shadows){
//check for opacity support -> animate shadow overlay on moving slideif($.support.opacity){
shadow.animate({
opacity:1}
,opts.speedH,opts.easeIn) .animate({
opacity:0}
,opts.speedH,opts.easeOut);
}
else{
if(inc){
shadow.animate({
right:opts.shadowTopFwdWidth}
,opts.speed,opts.easeIn);
}
else{
shadow.animate({
left:opts.shadowTopBackWidth}
,opts.speed,opts.easeIn);
}
}
}
}
function updateAfter(){
resetPages();
updatePager();
updateCtrls();
opts.after.call(self,opts);
busy = false;
}
function updateCtrls(){
//update ctrls,cursors and visibilityif(opts.overlays || opts.tabs || opts.arrows){
if(opts.curr < opts.pTotal-2){
ctrlsN.fadeIn('fast').css('cursor',opts.cursor);
}
else{
ctrlsN.fadeOut('fast').css('cursor','default');
}
if(opts.curr >= 2 && opts.curr != 0){
ctrlsP.fadeIn('fast').css('cursor',opts.cursor);
}
else{
ctrlsP.fadeOut('fast').css('cursor','default');
}
}
}
function updatePager(){
if(opts.pageSelector){
if(opts.direction == 'RTL'){
nums = (Math.abs(opts.curr - opts.pTotal)-1) +' - '+ ((Math.abs(opts.curr - opts.pTotal)));
if(opts.closed){
if(opts.curr==opts.pTotal-2){
nums='1'}
else if(opts.curr==0){
nums=opts.pTotal-2}
else{
nums = (Math.abs(opts.curr - opts.pTotal)-2) +' - '+ ((Math.abs(opts.curr - opts.pTotal)-1));
}
if(opts.covers){
if(opts.curr==opts.pTotal-2){
nums=''}
else if(opts.curr==0){
nums=''}
else{
nums = (Math.abs(opts.curr - opts.pTotal)-3) +' - '+ ((Math.abs(opts.curr - opts.pTotal)-2));
}
}
}
$(opts.menu+' .b-selector-page .b-current').text(nums);
}
else{
nums = (opts.curr+1) +' - '+ (opts.curr+2);
if(opts.closed){
if(opts.curr==0){
nums='1'}
else if(opts.curr==opts.pTotal-2){
nums=opts.pTotal-2}
else{
nums = (opts.curr) +'-'+ (opts.curr+1);
}
if(opts.covers){
if(opts.curr==0){
nums=''}
else if(opts.curr==opts.pTotal-2){
nums=''}
else{
nums = (opts.curr-1) +'-'+ (opts.curr);
}
}
}
$(opts.menu+' .b-selector-page .b-current').text(nums);
}
}
if(opts.chapterSelector){
if(chapters[opts.curr]!=""){
$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr]);
}
else if(chapters[opts.curr+1]!=""){
$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr+1]);
}
if(opts.direction == 'RTL' && chapters[opts.curr+1]!=""){
$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr+1]);
}
else if(chapters[opts.curr]!=""){
$(opts.menu+' .b-selector-chapter .b-current').text(chapters[opts.curr]);
}
}
}
function setupHash(){
hash = getHashNum();
if(!isNaN(hash) && hash <= opts.pTotal-1 && hash >= 0 && hash != ''){
if((hash % 2) != 0){
hash--;
}
opts.curr = hash;
}
else{
updateHash(opts.curr+1,opts);
}
self.hash = hash;
}
function pollHash(){
hash = getHashNum();
//check page numif(!isNaN(hash) && hash <= opts.pTotal-1 && hash >= 0){
if(hash != opts.curr && hash.toString()!=self.hash){
if((hash % 2) != 0){
hash--}
;
document.title = opts.name + " - Page "+ (hash+1);
if(!busy){
self.gotoPage(hash);
self.hash = hash;
}
}
}
}
//get page number from hash tag,last elementfunction getHashNum(){
var hash = window.location.hash.split('/');
if(hash.length > 1){
return parseInt(hash[2])-1;
}
else{
return '';
}
}
//set the hashfunction updateHash(hash,opts){
if(opts.hash){
window.location.hash = "/page/" + hash;
}
}
}
//define empty array to hold API references$.fn.booklet.interfaces = [];
//define default options$.fn.booklet.defaults ={
name:null,// name of the booklet to display in the document title barwidth:600,// container widthheight:400,// container heightspeed:1000,// speed of the transition between pagesdirection:'LTR',// direction of the overall content organization,default LTR,left to right,can be RTL for languages which read right to leftstartingPage:0,// index of the first page to be displayedeasing:'easeInOutQuad',// easing method for complete transitioneaseIn:'easeInQuad',// easing method for first half of transitioneaseOut:'easeOutQuad',// easing method for second half of transitionclosed:false,// start with the book "closed",will add empty pages to beginning and end of bookclosedFrontTitle:null,// used with "closed","menu" and "pageSelector",determines title of blank starting pageclosedFrontChapter:null,// used with "closed","menu" and "chapterSelector",determines chapter name of blank starting pageclosedBackTitle:null,// used with "closed","menu" and "pageSelector",determines chapter name of blank ending pageclosedBackChapter:null,// used with "closed","menu" and "chapterSelector",determines chapter name of blank ending pagecovers:false,// used with "closed",makes first and last pages into covers,without page numbers (if enabled)pagePadding:10,// padding for each page wrapperpageNumbers:true,// display page numbers on each pagehovers:true,// enables preview pageturn hover animation,shows a small preview of previous or next page on hoveroverlays:true,// enables navigation using a page sized overlay,when enabled links inside the content will not be clickabletabs:false,// adds tabs along the top of the pagestabWidth:60,// set the width of the tabstabHeight:20,// set the height of the tabsarrows:false,// adds arrows overlayed over the book edgescursor:'pointer',// cursor css setting for side bar areashash:false,// enables navigation using a hash string,ex:#/page/1 for page 1,will affect all booklets with 'hash' enabledkeyboard:true,// enables navigation with arrow keys (left:previous,right:next)next:null,// selector for element to use as click trigger for next pageprev:null,// selector for element to use as click trigger for previous pagemenu: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 animationsshadowTopFwdWidth:166,// shadow width for top forward animshadowTopBackWidth:166,// shadow width for top back animshadowBtmWidth:50,// shadow width for bottom shadowbefore:function(){
}
,// callback invoked before each page turn animationafter:function(){
}
// callback invoked after each page turn animation}
}
)(jQuery);
CSS代码(jquery.booklet.1.1.0.css):
/* @Booklet----------------------------------------*/
.booklet{width:800px;height:600px;position:relative;/*background:#fff;*/
margin:0 auto 10px;}
.booklet .b-page{left:0;top:0;position:absolute;overflow:hidden;padding:0;}
.booklet .b-pN{}
.booklet .b-p0{}
.booklet .b-p1{}
.booklet .b-p2{}
.booklet .b-p3{}
.booklet .b-p4{}
/*.booklet .b-load{display:none;}
*/
/* Page Wrappers */
.booklet .b-wrap{top:0;position:absolute;}
.booklet .b-wrap-left{background:#fff;}
.booklet .b-wrap-right{background:#efefef;}
.booklet .b-pN .b-wrap,.booklet .b-p1 .b-wrap,.booklet .b-p2 .b-wrap,.booklet .b-p3 .b-wrap,.booklet .b-p4 .b-wrap{left:0;}
.booklet .b-p0 .b-wrap{right:0;}
/* Custom Page Types */
.booklet .b-page-blank{padding:0;width:100%;height:100%;}
.booklet .b-page-cover{padding:0;width:100%;height:100%;background:#925C0E;}
.booklet .b-page-cover h3{color:#fff;text-shadow:0px 1px 3px #222;}
/* Page Numbers */
.booklet .b-counter{bottom:10px;position:absolute;display:block;width:25px;height:20px;background:#ccc;color:#444;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:10px;padding:5px 0 0;}
.booklet .b-wrap-left .b-counter{left:10px;}
.booklet .b-wrap-right .b-counter{right:10px;}
/* Page Shadows */
.booklet .b-shadow-f{right:0;top:0;position:absolute;opacity:0;background-image:url("images/shadow-top-forward.png");background-repeat:repeat-y;background-position:100% 0;}
.booklet .b-shadow-b{left:0;top:0;position:absolute;opacity:0;background-image:url("images/shadow-top-back.png");background-repeat:repeat-y;background-position:0 0;}
.booklet .b-p0{background-image:url("images/shadow.png");background-repeat:repeat-y;background-position:100% 10px;}
.booklet .b-p3{background-image:url("images/shadow.png");background-repeat:repeat-y;background-position:0 10px;}
/* Overlay Controls */
.booklet .b-overlay{top:0;position:absolute;height:100%;width:50%;}
.booklet .b-overlay-prev{left:0;}
.booklet .b-overlay-next{right:0;}
/* Tab Controls */
.booklet .b-tab{background:#000;height:40px;width:100%;padding:10px 0 0;text-align:center;color:#ccc;position:absolute;font-size:11px;}
.booklet .b-tab-prev{left:0;}
.booklet .b-tab-next{right:0;}
.booklet .b-tab:hover{background:#aaa;color:#000;}
/* Arrow Controls */
.booklet .b-arrow{display:block;position:absolute;text-indent:-9999px;top:0;height:100%;width:74px;}
.booklet .b-arrow div{display:none;text-indent:-9999px;height:170px;width:74px;position:absolute;left:0;top:25%;}
.booklet .b-arrow-next{right:-80px;}
.booklet .b-arrow-prev{left:-80px;}
.booklet .b-arrow-next div{background:url("images/arrow-next.png") no-repeat left top;}
.booklet .b-arrow-prev div{background:url("images/arrow-prev.png") no-repeat left top;}
/* @z-index fix (needed for older IE browsers)----------------------------------------*/
body{z-index:0;}
.b-menu{z-index:100;}
.b-selector{z-index:100;}
.booklet{z-index:10;}
.b-pN{z-index:10;}
.b-p0{z-index:10;}
.b-p1{z-index:10;}
.b-p2{z-index:10;}
.b-p3{z-index:10;}
.b-p4{z-index:10;}
.b-prev{z-index:40;}
.b-next{z-index:40;}
.b-counter{z-index:40;}
/* @Menu Items----------------------------------------*/
.b-menu{height:40px;padding:0 0 10px;}
.b-selector{height:40px;position:relative;float:right;border:none;color:#cecece;cursor:pointer;}
.b-selector .b-current{padding:8px 15px 12px;line-height:20px;min-width:18px;height:20px;display:block;background:#000;text-align:center;}
.b-selector-page{width:auto;margin-left:15px;}
.b-selector-chapter{width:auto;}
.b-selector:hover{color:#fff;background-position:left 0px;}
.b-selector:hover .b-current{background-position:right 0px;}
.b-selector ul{overflow:hidden;margin:0;list-style:none !important;position:absolute;top:40px;right:0;padding:0 0 10px;background:#000;width:240px;font:normal 12px "Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.b-selector li{border:none;}
.b-selector a{color:#cecece;height:14px;text-decoration:none;display:block;padding:5px 10px;}
.b-selector a .b-text{float:left;clear:none;}
.b-selector a .b-num{float:right;clear:none;}
.b-selector a:hover{color:#fff;}
CSS代码(style.css):
*{margin:0;padding:0;}
body{background:#ccc url(../images/wood.jpg) repeat top left;font-family:Arial,Helvetica,sans-serif;color:#444;font-size:12px;color:#000;}
/* Booklet jQuery Plugin Style*/
.booklet{-moz-box-shadow:0px 0px 1px #fff;-webkit-box-shadow:0px 0px 1px #fff;box-shadow:0px 0px 1px #fff;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.booklet .b-wrap-left{background:#fff url(../images/left_bg.jpg) no-repeat top left;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.booklet .b-wrap-right{background:#efefef url(../images/right_bg.jpg) no-repeat top left;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomright:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;}
.booklet .b-counter{bottom:10px;position:absolute;display:block;width:90%;height:20px;border-top:1px solid #ddd;color:#222;text-align:center;font-size:12px;padding:5px 0 0;background:transparent;-moz-box-shadow:0px -1px 1px #fff;-webkit-box-shadow:0px -1px 1px #fff;box-shadow:0px -1px 1px #fff;opacity:0.8;}
.book_wrapper{margin:0 auto;padding-top:50px;width:905px;height:540px;position:relative;background:transparent url(../images/bg.png) no-repeat 9px 27px;}
.book_wrapper h1{color:#13386a;margin:5px 5px 5px 15px;font-size:26px;background:transparent url(../images/h1.png) no-repeat bottom left;padding-bottom:7px;}
.book_wrapper p{font-size:16px;margin:5px 5px 5px 15px;}
.book_wrapper a.article,.book_wrapper a.demo{background:transparent url(../images/circle.png) no-repeat 50% 0px;display:block;width:95px;height:41px;text-decoration:none;outline:none;font-size:16px;color:#555;float:left;line-height:41px;padding-left:47px;}
.book_wrapper a.demo{margin-left:50px;}
.book_wrapper a.article:hover,.book_wrapper a.demo:hover{background-position:50% -41px;color:#13386a;}
.book_wrapper img{margin:10px 0px 5px 35px;width:300px;padding:4px;border:1px solid #ddd;-moz-box-shadow:1px 1px 1px #fff;-webkit-box-shadow:1px 1px 1px #fff;box-shadow:1px 1px 1px #fff;}
.booklet .b-wrap-right img{border:1px solid #E6E3C2;}
a#next_page_button,a#prev_page_button{display:none;position:absolute;width:41px;height:40px;cursor:pointer;margin-top:-20px;top:50%;background:transparent url(../images/buttons.png) no-repeat 0px -40px;}
a#prev_page_button{left:-30px;}
a#next_page_button{right:-30px;background-position:-41px -40px;}
a#next_page_button:hover{background-position:-41px 0px;}
a#prev_page_button:hover{background-position:0px 0px;}
.loading{width:160px;height:56px;position:absolute;top:50%;margin-top:-28px;right:135px;line-height:56px;color:#fff;padding-left:60px;font-size:15px;background:#000 url(../images/ajax-loader.gif) no-repeat 10px 50%;opacity:0.7;z-index:9999;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
分享到QQ
分享到微博
微信扫一扫
