中士
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery 翻书效果 by 25175</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta name="Design Corp" content="顺通网络" />
<meta name="Author" content="powered by 25175">
<meta name="description" content="jQuery 翻书效果,25175-你我一起舞-软件定制服务"/>
<meta name="Keywords" content="jQuery 翻书效果" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<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"/>
</head>
<body>
<h1 style="text-align:center" class="title">jquery书籍翻页效果</h1>
<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>关于25175</h1>
<p><a href="http://www.25175.com" target="_blank">www.25175.com</a>jquery特效 jquery教程 jquery插件 jquery入门 学习jquery jquery实例,最全jquery特效收集站点,提供jquery特效及jquery插件下载</p>
<a href="http://www.25175.com" target="_blank" class="article">首页</a>
<a href="http://www.25175.com/" target="_blank" class="demo">下载本源码</a>
</div>
<div>
<img src="images/2.jpg" alt="" />
<h1>标题：仿微博字数限制</h1>
<p>标题：仿微博字数限制标题：仿微博字数限制标题：仿微博字数限制</p>
<p>标题：仿微博字数限制标题：仿微博字数限制标题：仿微博字数限制</p>
<p>标题：仿微博字数限制标题：仿微博字数限制</p>
<p>标题：仿微博字数限制</p>
<a href="http://www.25175.com" target="_blank" class="article">查看</a>
<a href="http://www.25175.com" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="images/3.jpg" alt="" />
<h1>标题：动态导航栏</h1>
<p>标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏标题：动态导航栏</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
<a href="http://www.25175.com/" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="images/4.jpg" alt="" />
<h1>标题：鼠标提示图片</h1>
<p>标题：鼠标提示图片标题：鼠标提示图片标题：鼠标提示图片标题：鼠标提示图片</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
<a href="http://www.25175.com/" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="images/5.jpg" alt="" />
<h1>标题：具有伸缩效果的导航栏</h1>
<p>标题：具有伸缩效果的导航栏标题：具有伸缩效果的导航栏标题：具有伸缩效果的导航栏标题：具有伸缩效果的导航栏</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
</div>
<div>
<img src="images/6.jpg" alt="" />
<h1>标题：一款实用齐全的Jquery表单验证</h1>
<p>标题：一款实用齐全的Jquery表单验证一款实用齐全的Jquery表单验证一款实用齐全的Jquery表单验证</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
<a href="http://www.25175.com/" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="images/7.jpg" alt="" />
<h1>标题：Jquery文字特效</h1>
<p>标题：Jquery文字特效标题：Jquery文字特效标题：Jquery文字特效标题：Jquery文字特效标题：Jquery文字特效</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
<a href="http://www.25175.com/" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="images/8.jpg" alt="" />
<h1>Jquery评分实例</h1>
<p>Jquery评分实例</p>
<a href="http://www.25175.com/" target="_blank" class="article">查看</a>
<a href="http://www.25175.com/" target="_blank" class="demo">预览</a>
</div>
</div>
</div>
</div>
<div>
<span class="reference">
<a href=" http://www.25175.com">查看更多内容</a>
<a href="http://www.25175.com" target="_blank">jQuery翻书效果插件</a>
</span>
</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翻书特效
分享到：
 购买记录 其他最新源码
           
|
新兵
