利用jquery實現翻頁動畫電子雜志特效



38 149 50



特效描述:利用jquery實現 翻頁動畫 電子雜志特效,利用jquery實現翻頁動畫電子雜志特效

代碼結構

1. 引入CSS

<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"/>

2. 引入JS

<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>

3. HTML代碼

<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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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="http://51qianduan.com/" target="_blank" class="article">Article</a>
				<a href="http://51qianduan.com/" 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>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文字切換 文字選項卡 按鈕控制 電子雜志 電子書
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子