素材网 素材网

jQuery制作真实笔记本翻页动画效果

下载资源()次

阅读次数()次

发布时间:2014-02-22

jQuery制作真实笔记本翻页动画效果
分享到:

用法简介:

来源:xw素材网

jQuery制作真实笔记本翻页动画效果-xw素材网。

文件引用;

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

调用代码:

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


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。