易网时代-编程资源站
易网时代-编程资源站 
为大家分享的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 aslider for the thumbnails. The idea is to have an expandingthumbnails area which opens once an album is chosen.The thumbnails will scroll to the end and move back tothe first image. The user can scroll through the thumbnailsby 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 acontent area where we will display details about the portfolioitem. The image can be enlarged by clicking on it, makingit 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. portfolioitems of a web designers portfolio. We got the idea from the wonderfulportfolio of www.rareview.com where Flash is used to create theeffect. 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 thatshows your images in a unique way. The idea is to show thethumbnails of albums in a rounded fashion allowing theuser to scroll them automatically by moving the mouse.Clicking on a thumbnail will zoom in a big circle andthe full image which will be automatically resized tofit 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 verticalnavigation bars and a slide out content area. When hoveringover a menu item, an image slides down from the top and asubmenu slides up from the bottom. Clicking on one of thesubmenu items will make the whole menu collapse like a carddeck 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 willanimate step-wise in a custom way.</p> <p>We will be using the jQuery Easing Plugin and the jQuery 2DTransform 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 pagegallery with scrollable thumbnails and a scrollable fullscreen preview. The idea is to have a thumbnails bar atthe bottom of the page that scrolls automatically whenthe user moves the mouse. When a thumbnail is clicked,it moves to the center of the page and the full screenimage 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 usingjQuery. The main idea is to have an image area with severalimages that slide out when we hover over them, revealingother images. The sliding effect will be random, i.e.the images will slide to the top or bottom, left orright, 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 previousand next buttons and when the big image gets clickedit 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 youshow your latest articles or news in a compact way.The news previewer will show some list of articleson the left side and the preview of the article with alonger description on the right. Once a news on the leftis 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 menuthat will stand out once we hover over it by coveringeverything except the menu with a dark overlay.The menu will stay white and a submenu area willexpand. 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 gallerywith a Polaroid look. We will have albums that will expandto sets of slightly rotated thumbnails that pop out on hover.The full image will slide in from the bottom once a thumbnailis clicked. In the full image view the user can navigatethrough the pictures or simply choose another thumbnailto 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 extraordinarygallery with scrollable thumbnails that slide out from anavigation. We are going to use jQuery and some CSS3properties for the style. The main idea is to have amenu of albums where each item will reveal a horizontalbar 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 barwidth: 800, // container widthheight: 500, // container heightspeed: 600, // 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: true,// 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: false,// enables preview pageturn hover animation, shows a small preview of previous or next page on hoveroverlays:false,// 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:$bttn_next, // selector for element to use as click trigger for next pageprev:$bttn_prev, // 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}）;Cufon.refresh（）; } }）.attr（"src",source）;}）;}）;</script> </body></html>