以下是 jQuery多功能书本翻页特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<!-- content type -->
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<!-- viewport -->
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- title -->
<title>jQuery����鱾��ҳ��Ч</title>
<!-- add css -->
<link type="text/css" href="css/style.css" rel="stylesheet">
<!--<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Play:400,700">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Nunito:400,300">-->
<!-- add js -->
<script src="js/jquery.js"></script>
<script src="js/turn.js"></script>
<script src="js/jquery.fullscreen.js"></script>
<script src="js/jquery.address-1.6.min.js"></script>
<script src="js/onload.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
overflow:auto !important;
}
</style>
</head>
<body>
<!-- BEGIN FLIPBOOK STRUCTURE -->
<div data-template="true" data-cat="book7" id="fb7-ajax">
<!-- BEGIN HTML BOOK -->
<div data-current="book7" class="fb7" id="fb7">
<!-- preloader -->
<div class="fb7-preloader">
<div id="wBall_1" class="wBall">
<div class="wInnerBall">
</div>
</div>
<div id="wBall_2" class="wBall">
<div class="wInnerBall">
</div>
</div>
<div id="wBall_3" class="wBall">
<div class="wInnerBall">
</div>
</div>
<div id="wBall_4" class="wBall">
<div class="wInnerBall">
</div>
</div>
<div id="wBall_5" class="wBall">
<div class="wInnerBall">
</div>
</div>
</div>
<!-- background for book -->
<div class="fb7-bcg-book"></div>
<!-- BEGIN CONTAINER BOOK -->
<div id="fb7-container-book">
<!-- BEGIN deep linking -->
<section id="fb7-deeplinking">
<ul>
<li data-address="page1" data-page="1"></li>
<li data-address="page2-page3" data-page="2"></li>
<li data-address="page2-page3" data-page="3"></li>
<li data-address="page4-5" data-page="4"></li>
<li data-address="page4-5" data-page="5"></li>
<li data-address="page6-page7" data-page="6"></li>
<li data-address="page6-page7" data-page="7"></li>
<li data-address="page8-page9" data-page="8"></li>
<li data-address="page8-page9" data-page="9"></li>
<li data-address="end" data-page="10"></li>
</ul>
</section>
<!-- END deep linking -->
<!-- BEGIN ABOUT -->
<section id="fb7-about">
<h1>Why choose <strong>FlipBook?</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tellus ipsum,sit amet fermentum eros. Aliquam eget nulla neque, dignissim consectetur velit.Sed non metus sapien, nec laoreet ipsum.</p>
<h1>What is <strong>this</strong>?</h1>
<p>Ipsum <a href="javascript:youtube('48I0IHmsuOE','560','315')">Youtube</a> sit amet, consectetur adipiscing elit. Praesent eu tellus ipsum, sit amet fermentum eros. Aliquam eget nulla neque, dignissim consectetur velit. Sed non metus sapien, nec laoreet ipsum.</p>
<h1>Best <strong>features</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tellus ipsum, sit amet fermentum eros. Aliquam eget nulla neque, dignissim consectetur velit. Sed non metus sapien, nec laoreet ipsum.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<!-- END ABOUT -->
<!-- BEGIN PAGES -->
<div id="fb7-book">
<!-- BEGIN PAGE 1 -->
<div style="background-image:url(images/1.jpg)" class="fb7-noshadow">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
</div>
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 1 -->
<!-- BEGIN PAGE 2 -->
<div style="background-image:url()" >
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
<h1>Table of Contents</h1>
<h6>Integre nominavi vulputate ne</h6>
<ol>
<li><a href="javascript:setPage(4)">Lorem ipsum dolor sit amet, cum integre nominavi vulputate ne.</a></li>
<li><a href="javascript:setPage(4)">Iudico platonem qui ex, est eu malis dicunt malorum</a></li>
<li><a href="javascript:setPage(4)">No integre phaedrum pri, elit autem dissentiunt vix in.</a></li>
<li><a href="javascript:setPage(4)">Sit posse nostrum scribentur at.</a></li>
<li><a href="javascript:setPage(4)">Timeam sententiae nam at, vim eu harum quaerendum.</a></li>
<li><a href="javascript:setPage(4)">Ea quo illum aliquando.</a></li>
<li><a href="javascript:setPage(4)">Facete temporibus consectetuer id per, erant numquam rationibus cu his</a>.</li>
</ol>
<h6>Eu pri electram facilisis</h6>
<ol>
<li><a href="javascript:setPage(4)">In eam sale zril, ut vix iuvaret convenire.</a></li>
<li><a href="javascript:setPage(4)">Erat nobis convenire per et.</a></li>
<li><a href="javascript:setPage(4)">Detracto democritum voluptaria et vel</a></li>
<li><a href="javascript:setPage(4)">Nonumy incorrupte mea ea</a></li>
<li><a href="javascript:setPage(4)">Ornatus ponderum sea ea</a>.</li>
</ol>
<h6>No cum velit numquam laoreet</h6>
<ol>
<li><a href="javascript:setPage(4)">Lorem ipsum dolor sit amet, cum integre nominavi vulputate ne.</a></li>
<li><a href="javascript:setPage(4)">Iudico platonem qui ex, est eu malis dicunt malorum</a></li>
<li><a href="javascript:setPage(4)">No integre phaedrum pri, elit autem dissentiunt vix in.</a></li>
<li><a href="javascript:setPage(4)">Sit posse nostrum scribentur at.</a></li>
<li><a href="javascript:setPage(4)">Timeam sententiae nam at, vim eu harum quaerendum.</a></li>
<li><a href="javascript:setPage(4)">Ea quo illum aliquando.</a></li>
<li><a href="javascript:setPage(4)">Facete temporibus consectetuer id per, erant numquam rationibus cu his</a>.</li>
</ol>
<h6>Modo expetendis mea ut</h6>
<ol>
<li><a href="javascript:setPage(4)">Lorem ipsum dolor sit amet, cum integre nominavi vulputate ne.</a></li>
<li><a href="javascript:setPage(4)">Iudico platonem qui ex, est eu malis dicunt malorum</a></li>
<li><a href="javascript:setPage(4)">No integre phaedrum pri, elit autem dissentiunt vix in.</a></li>
</ol>
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">2</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 2 -->
<!-- BEGIN PAGE 3 -->
<div style="background-image:url(images/3.jpg)" >
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page-->
<div class="fb7-page-book">
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">3</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 3 -->
<!-- BEGIN PAGE 4-5 -->
<div style="background-image:url(images/4_5.jpg)" class="fb7-double fb7-first fb7-noshadow">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
</div>
</div>
<!-- end container page book -->
</div>
<div style="background-image:url(images/4_5.jpg)" class="fb7-double fb7-second fb7-noshadow">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
</div>
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 4-5 -->
<!-- BEGIN PAGE 6 -->
<div style="background-image:url(images/6.jpg)">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">6</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 6 -->
<!-- BEGIN PAGE 7 -->
<div style="background-image:url()">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
<h1>Duo antiopam platonem</h1>
<p>Noluisse constituto reprehendunt his ne. Ea eam eruditi feugait tacimates, ex percipit qualisque dignissim duo. Verterem voluptatum reprimique nec an. No nec utamur verterem. Utamur dolores reprimique cum ne, ei pro ocurreret consequat instructior.</p>
<p>Nihil incorrupte eu has, no vix saepe volumus, sit no iusto deseruisse efficiantur. His ut essent molestie deserunt, nemore laoreet tacimates vix eu. Choro cetero at duo. Ut appetere voluptaria usu, et ius fugit legimus.</p>
<p>Pro idque mucius bonorum in. Natum <a href="javascript:youtube('48I0IHmsuOE','560','315')">youtube</a> dolorum qui et, eum percipitur sadipscing eu. Ex phaedrum mediocrem nec. Nam cu nullam tamquam efficiantur, his quot nobis ut. Id est nihil exerci, paulo aliquando ut his.</p>
<p>Te ius noster alienum, semper feugait voluptatum an mel. Impedit reprimique quo et, at illum alterum admodum vix. Eum hinc lorem ei. Causae bonorum scaevola vix et, alii meliore intellegebat te sit, duis oblique usu te. His an pericula neglegentur, erant oratio an pro, ea nam mentitum mandamus maiestatis. Quot inani nominavi vix ei.</p>
<p>Nihil incorrupte eu has, no vix saepe volumus, sit no iusto deseruisse efficiantur. His ut essent molestie deserunt, nemore laoreet tacimates vix eu. Choro cetero at duo. Ut appetere voluptaria usu, et ius fugit legimus.</p>
<h6> Nam cu nullam tamquam efficiantur:</h6>
<ul>
<li>Natum epicurei comprehensam ex pe</li>
<li>Ridens corrumpit abhorreant nam id</li>
<li>Eu inani eirmod alterum</li>
<li>his ne iudico iuvaret delenit</li>
<li>Choro cetero at duo</li>
<li>Iusto deseruisse efficiantur</li>
<li>His cu utinam appareat</li>
</ul>
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">7</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 7 -->
<!-- BEGIN PAGE 8 -->
<div style="background-image:url()">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
<h1>Vis id quas novum</h1>
<p>Cu modus putent partiendo duo. Mel id nonumy iisque. Vis ex labitur gloriatur, no qui iusto albucius. Tantas nominavi conceptam ius in, mel posse choro cu.</p>
<p>Mel liber everti nostrum ne, illud tincidunt an mea. In debitis feugait deseruisse vim. Duo dicat vocent eu. Sea error tollit denique ne. Vim id postea neglegentur. Mel eu soluta splendide concludaturque.</p>
<p>Usu te prompta percipitur. Dictas repudiandae vel ut, sed ad omnium scriptorem, vix consul atomorum petentium no. Prompta eleifend ne eam, mel esse reque theophrastus in. Malis possit an est, ancillae definitiones vix at. Eu magna nihil his, has elitr perfecto nominati ea, quas maiestatis in sed.</p>
<p>Error eirmod invidunt in est. Vix ne voluptua accusata sadipscing, pri eu alia legimus facilisi, et quo mnesarchum efficiendi. Duo te labores accusam. An vim case ferri tractatos, habemus voluptaria philosophia ut mei.</p>
<p>Regione mentitum sit ad, nihil nominavi consetetur in vel. Semper oportere patrioque duo ne. Ne his option nonumes. Ad sea meis necessitatibus, has iisque fastidii ut, alia quidam ea pro. Eius gloriatur reformidans ne mei, qui impedit mentitum ad.</p>
<p>Vis id quas novum. Eos debitis expetendis ea, nullam libris deleniti mei ne. Te tale suas eam, everti fuisset scribentur et vix. Id qui etiam percipit, omnes copiosae eam at. Omnium eleifend interpretaris sea ea, wisi mediocritatem cu vix, qui no sale dicit efficiendi. No his nominavi eleifend, case solet dissentiet duo ad.</p>
<p>Sonet accusata quo te, erant munere an mei. Meis soleat fabulas eum ut. Ius iusto volumus recteque cu, libris interesset ea per, usu maluisset dignissim mnesarchum in. Vitae primis vis ei. Pro amet tale falli ad, ei usu adipiscing eloquentiam, ex augue tacimates definiebas qui.</p>
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">8</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 8 -->
<!-- BEGIN PAGE 9 -->
<div style="background-image:url(images/9.jpg)">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page -->
<div class="fb7-page-book">
</div>
<!-- begin number page -->
<div class="fb7-meta">
<span class="fb7-num">9</span>
</div>
<!-- end number page -->
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 9 -->
<!-- BEGIN PAGE 10 -->
<div style="background-image:url()">
<!-- begin container page book -->
<div class="fb7-cont-page-book">
<!-- description for page-->
<div class="fb7-page-book">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="padding-left: 150px;"> THE END</h1>
</div>
</div>
<!-- end container page book -->
</div>
<!-- END PAGE 10 -->
</div>
<!-- END PAGES -->
<!-- arrows -->
<a class="fb7-nav-arrow prev"></a>
<a class="fb7-nav-arrow next"></a>
<!-- shadow -->
<div class="fb7-shadow"></div>
</div>
<!-- END CONTAINER BOOK -->
<!-- BEGIN FOOTER -->
<div id="fb7-footer">
<div class="fb7-bcg-tools"></div>
<div class="fb7-menu" id="fb7-center">
<ul>
<!-- margin left -->
<li></li>
<!-- icon download -->
<li>
<a title="Pdf File Or Zip" class="fb7-download" href="img/file.pdf"></a>
</li>
<!-- icon_zoom_in -->
<li>
<a title="Zoom In" class="fb7-zoom-in"></a>
</li>
<!-- icon_zoom_out -->
<li>
<a title="Zoom Out" class="fb7-zoom-out"></a>
</li>
<!-- icon_zoom_auto -->
<li>
<a title="Zoom Auto" class="fb7-zoom-auto"></a>
</li>
<!-- icon_zoom_original -->
<li>
<a title="Zoom Original (Scale 1:1)" class="fb7-zoom-original"></a>
</li>
<!-- icon_allpages -->
<li>
<a title="Show All Pages " class="fb7-show-all"></a>
</li>
<!-- icon_home -->
<li>
<a title="Show Home Page" class="fb7-home"></a>
</li>
<!-- icon fullscreen -->
<li>
<a title="Full / Normal Screen" class="fb7-fullscreen"></a>
</li>
<!-- margin right -->
<li></li>
</ul>
</div>
<div class="fb7-menu" id="fb7-right">
<ul>
<!-- icon page manager -->
<li class="fb7-goto">
<label for="fb7-page-number" id="fb7-label-page-number"></label>
<input type="text" id="fb7-page-number">
<button type="button">Go</button>
</li>
</ul>
</div>
</div>
<!-- END FOOTER -->
<!-- BEGIN THUMBS -->
<div id="fb7-all-pages" class="fb7-overlay">
<section class="fb7-container-pages">
<div id="fb7-menu-holder">
<ul id="fb7-slider">
<!-- PAGE 1 - THUMB -->
<li class="1">
<img alt="" src="images/1_.jpg">
</li>
<!-- PAGE 2 - THUMB -->
<li class="2">
<img alt="" src="images/2_.jpg">
</li>
<!-- PAGE 3 - THUMB -->
<li class="3">
<img alt="" src="images/3_.jpg">
</li>
<!-- PAGE 4-5 - THUMB -->
<li class="5">
<img alt="" src="images/4_5_.jpg">
</li>
<!-- PAGE 6 - THUMB -->
<li class="6">
<img alt="" src="images/6_.jpg">
</li>
<!-- PAGE 7 - THUMB -->
<li class="7">
<img alt="" src="images/7_.jpg">
</li>
<!-- PAGE 8 - THUMB -->
<li class="8">
<img alt="" src="images/8_.jpg">
</li>
<!-- PAGE 9 - THUMB -->
<li class="9">
<img alt="" src="images/9_.jpg">
</li>
<!-- PAGE 10S - THUMB -->
<li class="10">
<img alt="" src="images/end_.jpg">
</li>
</ul>
</div>
</section>
</div>
<!-- END THUMBS -->
</div>
<!-- END HTML BOOK -->
</div>
<!-- END FLIPBOOK STRUCTURE -->
<!-- CONFIGURATION FLIPBOOK -->
<script>
jQuery('#fb7-ajax').data('config',
{
"page_width":"640",
"page_height":"920",
"go_to_page":"Page",
"gotopage_width":"45",
"zoom_double_click":"1",
"zoom_step":"0.06",
"tooltip_visible":"true",
"toolbar_visible":"true",
"deeplinking_enabled":"true",
"double_click_enabled":"true",
"rtl":"false"
})
</script>
</body>
</html>
JS代码(turn.js):
/** * turn.js 3rd release * www.turnjs.com * * Copyright (C) 2012,Emmanuel Garcia. * All rights reserved. * * Redistribution and use in source and binary forms,with or without * modification,are permitted provided that the following conditions * are met:* * 1. Redistributions of source code must retain the above copyright * notice,this list of conditions and the following disclaimer. * * 2. Any redistribution,use,or modification is done solely for personal * benefit and not for any commercial purpose or for monetary gain. * **/
(function($){
'use strict';
var has3d,vendor ='',PI = Math.PI,A90 = PI/2,isTouch = 'ontouchstart' in window,events = (isTouch) ?{
start:'touchstart',move:'touchmove',end:'touchend'}
:{
start:'mousedown',move:'mousemove',end:'mouseup'}
,// Contansts used for each corner// tl * tr// * */
/ bl * brcorners ={
backward:['bl','tl'],forward:['br','tr'],all:['tl','bl','tr','br']}
,displays = ['single','double'],// Default optionsturnOptions ={
// First pagepage:1,// Enables gradientsgradients:true,// Duration of transition in millisecondsduration:600,// Enables hardware accelerationacceleration:true,// Displaydisplay:'double',// Eventswhen:null}
,flipOptions ={
// Back pagefolding:null,// Corners// backward:Activates both tl and bl corners// forward:Activates both tr and br corners// all:Activates all the cornerscorners:'forward',// Size of the active zone of each cornercornerSize:100,// Enables gradientsgradients:true,// Duration of transition in millisecondsduration:600,// Enables hardware accelerationacceleration:true}
,// Number of pages in the DOM,minimum value:6pagesInDOM = 6,pagePosition ={
0:{
top:0,left:0,right:'auto',bottom:'auto'}
,1:{
top:0,right:0,left:'auto',bottom:'auto'}
}
,// Gets basic attributes for a layerdivAtt = function(top,left,zIndex,overf){
return{
'css':{
position:'absolute',top:top,left:left,'overflow':overf || 'hidden','z-index':zIndex || 'auto'}
}
;
}
,// Gets a 2D point from a bezier curve of four pointsbezier = function(p1,p2,p3,p4,t){
var mum1 = 1 - t,mum13 = mum1 * mum1 * mum1,mu3 = t * t * t;
return point2D(Math.round(mum13*p1.x + 3*t*mum1*mum1*p2.x + 3*t*t*mum1*p3.x + mu3*p4.x),Math.round(mum13*p1.y + 3*t*mum1*mum1*p2.y + 3*t*t*mum1*p3.y + mu3*p4.y));
}
,// Converts an angle from degrees to radiansrad = function(degrees){
return degrees/180*PI;
}
,// Converts an angle from radians to degreesdeg = function(radians){
return radians/PI*180;
}
,// Gets a 2D pointpoint2D = function(x,y){
return{
x:x,y:y}
;
}
,// Returns the traslate valuetranslate = function(x,y,use3d){
return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px,0px) ':' translate(' + x + 'px,' + y + 'px) ';
}
,// Returns the rotation valuerotate = function(degrees){
return ' rotate(' + degrees + 'deg) ';
}
,// Checks if a property belongs to an objecthas = function(property,object){
return Object.prototype.hasOwnProperty.call(object,property);
}
,// Gets the CSS3 vendor prefixgetPrefix = function(){
var vendorPrefixes = ['Moz','Webkit','Khtml','O','ms'],len = vendorPrefixes.length,vendor = '';
while (len--)if ((vendorPrefixes[len] + 'Transform') in document.body.style)vendor='-'+vendorPrefixes[len].toLowerCase()+'-';
return vendor;
}
,// Adds gradientsgradient = function(obj,p0,p1,colors,numColors){
var j,cols = [];
if (vendor=='-webkit-'){
for (j = 0;
j<numColors;
j++)cols.push('color-stop('+colors[j][0]+','+colors[j][1]+')');
obj.css({
'background-image':'-webkit-gradient(linear,'+p0.x+'% '+p0.y+'%,'+p1.x+'% '+p1.y+'%,'+ cols.join(',') +' )'}
);
}
else{
// This procedure makes the gradients for non-webkit browsers// It will be reduced to one unique way for gradients in next versionsp0 ={
x:p0.x/100 * obj.width(),y:p0.y/100 * obj.height()}
;
p1 ={
x:p1.x/100 * obj.width(),y:p1.y/100 * obj.height()}
;
var dx = p1.x-p0.x,dy = p1.y-p0.y,angle = Math.atan2(dy,dx),angle2 = angle - Math.PI/2,diagonal = Math.abs(obj.width()*Math.sin(angle2)) + Math.abs(obj.height()*Math.cos(angle2)),gradientDiagonal = Math.sqrt(dy*dy + dx*dx),corner = point2D((p1.x<p0.x) ? obj.width():0,(p1.y<p0.y) ? obj.height():0),slope = Math.tan(angle),inverse = -1/slope,x = (inverse*corner.x - corner.y - slope*p0.x + p0.y) / (inverse-slope),c ={
x:x,y:inverse*x - inverse*corner.x + corner.y}
,segA = (Math.sqrt( Math.pow(c.x-p0.x,2) + Math.pow(c.y-p0.y,2)));
for (j = 0;
j<numColors;
j++)cols.push(' '+colors[j][1]+' '+(( segA + gradientDiagonal*colors[j][0] )*100/diagonal)+'%');
obj.css({
'background-image':vendor+'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')'}
);
}
}
,turnMethods ={
// Singleton constructor// $('#selector').turn([options]);
init:function(opts){
// Define constantsif (has3d===undefined){
has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
vendor = getPrefix();
}
var i,data = this.data(),ch = this.children();
opts = $.extend({
width:this.width(),height:this.height()}
,turnOptions,opts);
data.opts = opts;
data.pageObjs ={
}
;
data.pages ={
}
;
data.pageWrap ={
}
;
data.pagePlace ={
}
;
data.pageMv = [];
data.totalPages = opts.pages || 0;
if (opts.when)for (i in opts.when)if (has(i,opts.when))this.bind(i,opts.when[i]);
this.css({
position:'relative',width:opts.width,height:opts.height}
);
this.turn('display',opts.display);
if (has3d && !isTouch && opts.acceleration)this.transform(translate(0,0,true));
for (i = 0;
i<ch.length;
i++)this.turn('addPage',ch[i],i+1);
this.turn('page',opts.page);
// allow setting active corners as an option corners = $.extend({
}
,corners,opts.corners);
// Event listeners$(this).bind(events.start,function(e){
for (var page in data.pages)if (has(page,data.pages) && flipMethods._eventStart.call(data.pages[page],e)===false)return false;
}
);
$(document).bind(events.move,function(e){
for (var page in data.pages)if (has(page,data.pages))flipMethods._eventMove.call(data.pages[page],e);
}
).bind(events.end,function(e){
for (var page in data.pages)if (has(page,data.pages))flipMethods._eventEnd.call(data.pages[page],e);
}
);
data.done = true;
return this;
}
,// Adds a page from external dataaddPage:function(element,page){
var incPages = false,data = this.data(),lastPage = data.totalPages+1;
if (page){
if (page==lastPage){
page = lastPage;
incPages = true;
}
else if (page>lastPage)throw new Error ('It is impossible to add the page "'+page+'",the maximum value is:"'+lastPage+'"');
}
else{
page = lastPage;
incPages = true;
}
if (page>=1 && page<=lastPage){
// Stop animationsif (data.done) this.turn('stop');
// Move pages if it's necessaryif (page in data.pageObjs)turnMethods._movePages.call(this,page,1);
// Update number of pagesif (incPages)data.totalPages = lastPage;
// Add elementdata.pageObjs[page] = $(element).addClass('turn-page p' + page);
// Add pageturnMethods._addPage.call(this,page);
// Update viewif (data.done)this.turn('update');
turnMethods._removeFromDOM.call(this);
}
return this;
}
,// Adds a page from internal data_addPage:function(page){
var data = this.data(),element = data.pageObjs[page];
if (element)if (turnMethods._necessPage.call(this,page)){
if (!data.pageWrap[page]){
var pageWidth = (data.display=='double') ? this.width()/2:this.width(),pageHeight = this.height();
element.css({
width:pageWidth,height:pageHeight}
);
// Placedata.pagePlace[page] = page;
// Wrapperdata.pageWrap[page] = $('<div/>',{
'class':'turn-page-wrapper',page:page,css:{
position:'absolute',overflow:'hidden',width:pageWidth,height:pageHeight}
}
).css(pagePosition[(data.display=='double') ? page%2:0]);
// Append to thisthis.append(data.pageWrap[page]);
// Move data.pageObjs[page] (element) to wrapperdata.pageWrap[page].prepend(data.pageObjs[page]);
}
// If the page is in the current view,create the flip effectif (!page || turnMethods._setPageLoc.call(this,page)==1)turnMethods._makeFlip.call(this,page);
}
else{
// Placedata.pagePlace[page] = 0;
// Remove element from the DOMif (data.pageObjs[page])data.pageObjs[page].remove();
}
}
,// Checks if a page is in memoryhasPage:function(page){
return page in this.data().pageObjs;
}
,// Prepares the flip effect for a page_makeFlip:function(page){
var data = this.data();
if (!data.pages[page] && data.pagePlace[page]==page){
var single = data.display=='single',even = page%2;
data.pages[page] = data.pageObjs[page].css({
width:(single) ? this.width():this.width()/2,height:this.height()}
).flip({
page:page,next:(single && page === data.totalPages) ? page -1:((even || single) ? page+1:page-1),turn:this,duration:data.opts.duration,acceleration:data.opts.acceleration,corners:(single) ? 'all':((even) ? 'forward':'backward'),backGradient:data.opts.gradients,frontGradient:data.opts.gradients}
).flip('disable',data.disabled).bind('pressed',turnMethods._pressed).bind('released',turnMethods._released).bind('start',turnMethods._start).bind('end',turnMethods._end).bind('flip',turnMethods._flip);
}
return data.pages[page];
}
,// Makes pages within a range_makeRange:function(){
var page,data = this.data(),range = this.turn('range');
for (page = range[0];
page<=range[1];
page++)turnMethods._addPage.call(this,page);
}
,// Returns a range of `pagesInDOM` pages that should be in the DOM// Example:// - page of the current view,return true// * page is in the range,return true// 0 page is not in the range,return false//// 1 2-3 4-5 6-7 8-9 10-11 12-13// ** ** -- ** **range:function(page){
var remainingPages,left,right,data = this.data();
page = page || data.tpage || data.page;
var view = turnMethods._view.call(this,page);
if (page<1 || page>data.totalPages)throw new Error ('"'+page+'" is not a page for range');
view[1] = view[1] || view[0];
if (view[0]>=1 && view[1]<=data.totalPages){
remainingPages = Math.floor((pagesInDOM-2)/2);
if (data.totalPages-view[1] > view[0]){
left = Math.min(view[0]-1,remainingPages);
right = 2*remainingPages-left;
}
else{
right = Math.min(data.totalPages-view[1],remainingPages);
left = 2*remainingPages-right;
}
}
else{
left = pagesInDOM-1;
right = pagesInDOM-1;
}
return [Math.max(1,view[0]-left),Math.min(data.totalPages,view[1]+right)];
}
,// Detects if a page is within the range of `pagesInDOM` from the current view_necessPage:function(page){
if (page===0)return true;
var range = this.turn('range');
return page>=range[0] && page<=range[1];
}
,// Releases memory by removing pages from the DOM_removeFromDOM:function(){
var page,data = this.data();
for (page in data.pageWrap)if (has(page,data.pageWrap) && !turnMethods._necessPage.call(this,page))turnMethods._removePageFromDOM.call(this,page);
}
,// Removes a page from DOM and its internal references_removePageFromDOM:function(page){
var data = this.data();
if (data.pages[page]){
var dd = data.pages[page].data();
if (dd.f && dd.f.fwrapper)dd.f.fwrapper.remove();
data.pages[page].remove();
delete data.pages[page];
}
if (data.pageObjs[page])data.pageObjs[page].remove();
if (data.pageWrap[page]){
data.pageWrap[page].remove();
delete data.pageWrap[page];
}
delete data.pagePlace[page];
}
,// Removes a pageremovePage:function(page){
var data = this.data();
if (data.pageObjs[page]){
// Stop animationsthis.turn('stop');
// Remove `page`turnMethods._removePageFromDOM.call(this,page);
delete data.pageObjs[page];
// Move the pages behind `page`turnMethods._movePages.call(this,page,-1);
// Resize the size of this magazinedata.totalPages = data.totalPages-1;
turnMethods._makeRange.call(this);
// Check the current viewif (data.page>data.totalPages)this.turn('page',data.totalPages);
}
return this;
}
,// Moves pages_movePages:function(from,change){
var page,data = this.data(),single = data.display=='single',move = function(page){
var next = page + change,odd = next%2;
if (data.pageObjs[page])data.pageObjs[next] = data.pageObjs[page].removeClass('page' + page).addClass('page' + next);
if (data.pagePlace[page] && data.pageWrap[page]){
data.pagePlace[next] = next;
data.pageWrap[next] = data.pageWrap[page].css(pagePosition[(single) ? 0:odd]).attr('page',next);
if (data.pages[page])data.pages[next] = data.pages[page].flip('options',{
page:next,next:(single || odd) ? next+1:next-1,corners:(single) ? 'all':((odd) ? 'forward':'backward')}
);
if (change){
delete data.pages[page];
delete data.pagePlace[page];
delete data.pageObjs[page];
delete data.pageWrap[page];
delete data.pageObjs[page];
}
}
}
;
if (change>0)for (page=data.totalPages;
page>=from;
page--) move(page);
elsefor (page=from;
page<=data.totalPages;
page++) move(page);
}
,// Sets or Gets the display modedisplay:function(display){
var data = this.data(),currentDisplay = data.display;
if (display){
if ($.inArray(display,displays)==-1)throw new Error ('"'+display + '" is not a value for display');
if (display=='single'){
if (!data.pageObjs[0]){
this.turn('stop').css({
'overflow':'hidden'}
);
data.pageObjs[0] = $('<div />',{
'class':'turn-page p-temporal'}
).css({
width:this.width(),height:this.height()}
).appendTo(this);
}
}
else{
if (data.pageObjs[0]){
this.turn('stop').css({
'overflow':''}
);
data.pageObjs[0].remove();
delete data.pageObjs[0];
}
}
data.display = display;
if (currentDisplay){
var size = this.turn('size');
turnMethods._movePages.call(this,1,0);
this.turn('size',size.width,size.height).turn('update');
}
return this;
}
elsereturn currentDisplay;
}
,// Detects if the pages are being animatedanimating:function(){
return this.data().pageMv.length>0;
}
,// Disables and enables the effectdisable:function(bool){
var page,data = this.data(),view = this.turn('view');
data.disabled = bool===undefined || bool===true;
for (page in data.pages)if (has(page,data.pages))data.pages[page].flip('disable',bool ? $.inArray(page,view):false );
return this;
}
,// Gets and sets the sizesize:function(width,height){
if (width && height){
var data = this.data(),pageWidth = (data.display=='double') ? width/2:width,page;
this.css({
width:width,height:height}
);
if (data.pageObjs[0])data.pageObjs[0].css({
width:pageWidth,height:height}
);
for (page in data.pageWrap){
if (!has(page,data.pageWrap)) continue;
data.pageObjs[page].css({
width:pageWidth,height:height}
);
data.pageWrap[page].css({
width:pageWidth,height:height}
);
if (data.pages[page])data.pages[page].css({
width:pageWidth,height:height}
);
}
this.turn('resize');
return this;
}
else{
return{
width:this.width(),height:this.height()}
;
}
}
,// Resizes each pageresize:function(){
var page,data = this.data();
if (data.pages[0]){
data.pageWrap[0].css({
left:-this.width()}
);
data.pages[0].flip('resize',true);
}
for (page = 1;
page <= data.totalPages;
page++)if (data.pages[page])data.pages[page].flip('resize',true);
}
,// Removes an animation from the cache_removeMv:function(page){
var i,data = this.data();
for (i=0;
i<data.pageMv.length;
i++)if (data.pageMv[i]==page){
data.pageMv.splice(i,1);
return true;
}
return false;
}
,// Adds an animation to the cache_addMv:function(page){
var data = this.data();
turnMethods._removeMv.call(this,page);
data.pageMv.push(page);
}
,// Gets indexes for a view_view:function(page){
var data = this.data();
page = page || data.page;
if (data.display=='double')return (page%2) ? [page-1,page]:[page,page+1];
elsereturn [page];
}
,// Gets a viewview:function(page){
var data = this.data(),view = turnMethods._view.call(this,page);
return (data.display=='double') ? [(view[0]>0) ? view[0]:0,(view[1]<=data.totalPages) ? view[1]:0]:[(view[0]>0 && view[0]<=data.totalPages) ? view[0]:0];
}
,// Stops animationsstop:function(ok){
var i,opts,data = this.data(),pages = data.pageMv;
data.pageMv = [];
if (data.tpage){
data.page = data.tpage;
delete data['tpage'];
}
for (i in pages){
if (!has(i,pages)) continue;
opts = data.pages[pages[i]].data().f.opts;
flipMethods._moveFoldingPage.call(data.pages[pages[i]],null);
data.pages[pages[i]].flip('hideFoldedPage');
data.pagePlace[opts.next] = opts.next;
if (opts.force){
opts.next = (opts.page%2===0) ? opts.page-1:opts.page+1;
delete opts['force'];
}
}
this.turn('update');
return this;
}
,// Gets and sets the number of pagespages:function(pages){
var data = this.data();
if (pages){
if (pages<data.totalPages){
for (var page = pages+1;
page<=data.totalPages;
page++)this.turn('removePage',page);
if (this.turn('page')>pages)this.turn('page',pages);
}
data.totalPages = pages;
return this;
}
elsereturn data.totalPages;
}
,// Sets a page without effect_fitPage:function(page,ok){
var data = this.data(),newView = this.turn('view',page);
if (data.page!=page){
this.trigger('turning',[page,newView]);
if ($.inArray(1,newView)!=-1) this.trigger('first');
if ($.inArray(data.totalPages,newView)!=-1) this.trigger('last');
}
if (!data.pageObjs[page])return;
data.tpage = page;
this.turn('stop',ok);
turnMethods._removeFromDOM.call(this);
turnMethods._makeRange.call(this);
this.trigger('turned',[page,newView]);
}
,// Turns to a page_turnPage:function(page){
var current,next,data = this.data(),view = this.turn('view'),newView = this.turn('view',page);
if (data.page!=page){
this.trigger('turning',[page,newView]);
if ($.inArray(1,newView)!=-1) this.trigger('first');
if ($.inArray(data.totalPages,newView)!=-1) this.trigger('last');
}
if (!data.pageObjs[page])return;
data.tpage = page;
this.turn('stop');
turnMethods._makeRange.call(this);
if (data.display=='single'){
current = view[0];
next = newView[0];
}
else if (view[1] && page>view[1]){
current = view[1];
next = newView[0];
}
else if (view[0] && page<view[0]){
current = view[0];
next = newView[1];
}
if (data.pages[current]){
var opts = data.pages[current].data().f.opts;
data.tpage = next;
if (opts.next!=next){
opts.next = next;
data.pagePlace[next] = opts.page;
opts.force = true;
}
if (data.display=='single')data.pages[current].flip('turnPage',(newView[0] > view[0]) ? 'br':'bl');
elsedata.pages[current].flip('turnPage');
}
}
,// Gets and sets a pagepage:function(page){
page = parseInt(page,10);
var data = this.data();
if (page>0 && page<=data.totalPages){
if (!data.done || $.inArray(page,this.turn('view'))!=-1)turnMethods._fitPage.call(this,page);
elseturnMethods._turnPage.call(this,page);
return this;
}
elsereturn data.page;
}
,// Turns to the next viewnext:function(){
var data = this.data();
return this.turn('page',turnMethods._view.call(this,data.page).pop() + 1);
}
,// Turns to the previous viewprevious:function(){
var data = this.data();
return this.turn('page',turnMethods._view.call(this,data.page).shift() - 1);
}
,// Adds a motion to the internal list_addMotionPage:function(){
var opts = $(this).data().f.opts,turn = opts.turn,dd = turn.data();
opts.pageMv = opts.page;
turnMethods._addMv.call(turn,opts.pageMv);
dd.pagePlace[opts.next] = opts.page;
turn.turn('update');
}
,// This event is called in context of flip_start:function(e,opts,corner){
var data = opts.turn.data(),event = $.Event('start');
e.stopPropagation();
opts.turn.trigger(event,[opts,corner]);
if (event.isDefaultPrevented()){
e.preventDefault();
return;
}
if (data.display=='single'){
var left = corner.charAt(1)=='l';
if ((opts.page==1 && left) || (opts.page==data.totalPages && !left))e.preventDefault();
else{
if (left){
opts.next = (opts.next<opts.page) ? opts.next:opts.page-1;
opts.force = true;
}
elseopts.next = (opts.next>opts.page) ? opts.next:opts.page+1;
}
}
turnMethods._addMotionPage.call(this);
}
,// This event is called in context of flip_end:function(e,turned){
var that = $(this),data = that.data().f,opts = data.opts,turn = opts.turn,dd = turn.data();
e.stopPropagation();
if (turned || dd.tpage){
if (dd.tpage==opts.next || dd.tpage==opts.page){
delete dd['tpage'];
turnMethods._fitPage.call(turn,dd.tpage || opts.next,true);
}
}
else{
turnMethods._removeMv.call(turn,opts.pageMv);
turn.turn('update');
}
}
,// This event is called in context of flip_pressed:function(){
var page,that = $(this),data = that.data().f,turn = data.opts.turn,pages = turn.data().pages;
for (page in pages)if (page!=data.opts.page)pages[page].flip('disable',true);
return data.time = new Date().getTime();
}
,// This event is called in context of flip_released:function(e,point){
var that = $(this),data = that.data().f;
e.stopPropagation();
if ((new Date().getTime())-data.time<200 || point.x<0 || point.x>$(this).width()){
e.preventDefault();
data.opts.turn.data().tpage = data.opts.next;
data.opts.turn.turn('update');
$(that).flip('turnPage');
}
}
,// This event is called in context of flip_flip:function(){
var opts = $(this).data().f.opts;
opts.turn.trigger('turn',[opts.next]);
}
,// Calculate the z-index value for pages during the animationcalculateZ:function(mv){
var i,page,nextPage,placePage,dpage,that = this,data = this.data(),view = this.turn('view'),currentPage = view[0] || view[1],r ={
pageZ:{
}
,partZ:{
}
,pageV:{
}
}
,addView = function(page){
var view = that.turn('view',page);
if (view[0]) r.pageV[view[0]] = true;
if (view[1]) r.pageV[view[1]] = true;
}
;
for (i = 0;
i<mv.length;
i++){
page = mv[i];
nextPage = data.pages[page].data().f.opts.next;
placePage = data.pagePlace[page];
addView(page);
addView(nextPage);
dpage = (data.pagePlace[nextPage]==nextPage) ? nextPage:page;
r.pageZ[dpage] = data.totalPages - Math.abs(currentPage-dpage);
r.partZ[placePage] = data.totalPages*2 + Math.abs(currentPage-dpage);
}
return r;
}
,// Updates the z-index and display property of every pageupdate:function(){
var page,data = this.data();
if (data.pageMv.length && data.pageMv[0]!==0){
// Update motionvar apage,pos = this.turn('calculateZ',data.pageMv),view = this.turn('view',data.tpage);
if (data.pagePlace[view[0]]==view[0]) apage = view[0];
else if (data.pagePlace[view[1]]==view[1]) apage = view[1];
for (page in data.pageWrap){
if (!has(page,data.pageWrap)) continue;
data.pageWrap[page].css({
display:(pos.pageV[page]) ? '':'none','z-index':pos.pageZ[page] || 0}
);
if (data.pages[page]){
data.pages[page].flip('z',pos.partZ[page] || null);
if (pos.pageV[page])data.pages[page].flip('resize');
if (data.tpage)data.pages[page].flip('disable',true);
// data.disabled || page!=apage}
}
}
else{
// Update static pagesfor (page in data.pageWrap){
if (!has(page,data.pageWrap)) continue;
var pageLocation = turnMethods._setPageLoc.call(this,page);
if (data.pages[page])data.pages[page].flip('disable',data.disabled || pageLocation!=1).flip('z',null);
}
}
}
,// Sets the z-index and display property of a page// It depends on the current view_setPageLoc:function(page){
var data = this.data(),view = this.turn('view');
if (page==view[0] || page==view[1]){
data.pageWrap[page].css({
'z-index':data.totalPages,display:''}
);
return 1;
}
else if ((data.display=='single' && page==view[0]+1) || (data.display=='double' && page==view[0]-2 || page==view[1]+2)){
data.pageWrap[page].css({
'z-index':data.totalPages-1,display:''}
);
return 2;
}
else{
data.pageWrap[page].css({
'z-index':0,display:'none'}
);
return 0;
}
}
}
,// Methods and properties for the flip page effectflipMethods ={
// Constructorinit:function(opts){
if (opts.gradients){
opts.frontGradient = true;
opts.backGradient = true;
}
this.data({
f:{
}
}
);
this.flip('options',opts);
flipMethods._addPageWrapper.call(this);
return this;
}
,setData:function(d){
var data = this.data();
data.f = $.extend(data.f,d);
return this;
}
,options:function(opts){
var data = this.data().f;
if (opts){
flipMethods.setData.call(this,{
opts:$.extend({
}
,data.opts || flipOptions,opts)}
);
return this;
}
elsereturn data.opts;
}
,z:function(z){
var data = this.data().f;
data.opts['z-index'] = z;
data.fwrapper.css({
'z-index':z || parseInt(data.parent.css('z-index'),10) || 0}
);
return this;
}
,_cAllowed:function(){
return corners[this.data().f.opts.corners] || this.data().f.opts.corners;
}
,_cornerActivated:function(e){
if (e.originalEvent === undefined){
return false;
}
e = (isTouch) ? e.originalEvent.touches:[e];
var data = this.data().f,pos = data.parent.offset(),width = this.width(),height = this.height(),c ={
x:Math.max(0,e[0].pageX-pos.left),y:Math.max(0,e[0].pageY-pos.top)}
,csz = data.opts.cornerSize,allowedCorners = flipMethods._cAllowed.call(this);
if (c.x<=0 || c.y<=0 || c.x>=width || c.y>=height) return false;
if (c.y<csz) c.corner = 't';
else if (c.y>=height-csz) c.corner = 'b';
else return false;
if (c.x<=csz) c.corner+= 'l';
else if (c.x>=width-csz) c.corner+= 'r';
else return false;
return ($.inArray(c.corner,allowedCorners)==-1) ? false:c;
}
,_c:function(corner,opts){
opts = opts || 0;
return ({
tl:point2D(opts,opts),tr:point2D(this.width()-opts,opts),bl:point2D(opts,this.height()-opts),br:point2D(this.width()-opts,this.height()-opts)}
)[corner];
}
,_c2:function(corner){
return{
tl:point2D(this.width()*2,0),tr:point2D(-this.width(),0),bl:point2D(this.width()*2,this.height()),br:point2D(-this.width(),this.height())}
[corner];
}
,_foldingPage:function(corner){
var opts = this.data().f.opts;
if (opts.folding) return opts.folding;
else if(opts.turn){
var data = opts.turn.data();
if (data.display == 'single')return (data.pageObjs[opts.next]) ? data.pageObjs[0]:null;
elsereturn data.pageObjs[opts.next];
}
}
,_backGradient:function(){
var data =this.data().f,turn = data.opts.turn,gradient = data.opts.backGradient &&(!turn || turn.data().display=='single' || (data.opts.page!=2 && data.opts.page!=turn.data().totalPages-1) );
if (gradient && !data.bshadow)data.bshadow = $('<div/>',divAtt(0,0,1)).css({
'position':'',width:this.width(),height:this.height()}
).appendTo(data.parent);
return gradient;
}
,resize:function(full){
var data = this.data().f,width = this.width(),height = this.height(),size = Math.round(Math.sqrt(Math.pow(width,2)+Math.pow(height,2)));
if (full){
data.wrapper.css({
width:size,height:size}
);
data.fwrapper.css({
width:size,height:size}
).children(':first-child').css({
width:width,height:height}
);
data.fpage.css({
width:height,height:width}
);
if (data.opts.frontGradient)data.ashadow.css({
width:height,height:width}
);
if (flipMethods._backGradient.call(this))data.bshadow.css({
width:width,height:height}
);
}
if (data.parent.is(':visible')){
data.fwrapper.css({
top:data.parent.offset().top,left:data.parent.offset().left}
);
if (data.opts.turn)data.fparent.css({
top:-data.opts.turn.offset().top,left:-data.opts.turn.offset().left}
);
}
this.flip('z',data.opts['z-index']);
}
,// Prepares the page by adding a general wrapper and another objects_addPageWrapper:function(){
var att,data = this.data().f,parent = this.parent();
if (!data.wrapper){
var left = this.css('left'),top = this.css('top'),width = this.width(),height = this.height(),size = Math.round(Math.sqrt(Math.pow(width,2)+Math.pow(height,2)));
data.parent = parent;
data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent:$('#turn-fwrappers');
if (!data.fparent){
var fparent = $('<div/>',{
css:{
'pointer-events':'none'}
}
).hide();
fparent.data().flips = 0;
if (data.opts.turn){
fparent.css(divAtt(-data.opts.turn.offset().top,-data.opts.turn.offset().left,'auto','visible').css).appendTo(data.opts.turn);
data.opts.turn.data().fparent = fparent;
}
else{
fparent.css(divAtt(0,0,'auto','visible').css).attr('id','turn-fwrappers').appendTo($('body'));
}
data.fparent = fparent;
}
this.css({
position:'absolute',top:0,left:0,bottom:'auto',right:'auto'}
);
data.wrapper = $('<div/>',divAtt(0,0,this.css('z-index'))).appendTo(parent).prepend(this);
data.fwrapper = $('<div/>',divAtt(parent.offset().top,parent.offset().left)).hide().appendTo(data.fparent);
data.fpage = $('<div/>',{
css:{
cursor:'default'}
}
).appendTo($('<div/>',divAtt(0,0,0,'visible')).appendTo(data.fwrapper));
if (data.opts.frontGradient)data.ashadow = $('<div/>',divAtt(0,0,1)).appendTo(data.fpage);
// Save dataflipMethods.setData.call(this,data);
// Set sizeflipMethods.resize.call(this,true);
}
}
,// Takes a 2P point from the screen and applies the transformation_fold:function(point){
var that = this,a = 0,alpha = 0,beta,px,gradientEndPointA,gradientEndPointB,gradientStartV,gradientSize,gradientOpacity,mv = point2D(0,0),df = point2D(0,0),tr = point2D(0,0),width = this.width(),height = this.height(),folding = flipMethods._foldingPage.call(this),tan = Math.tan(alpha),data = this.data().f,ac = data.opts.acceleration,h = data.wrapper.height(),o = flipMethods._c.call(this,point.corner),top = point.corner.substr(0,1) == 't',left = point.corner.substr(1,1) == 'l',compute = function(){
var rel = point2D((o.x) ? o.x - point.x:point.x,(o.y) ? o.y - point.y:point.y),tan = (Math.atan2(rel.y,rel.x)),middle;
alpha = A90 - tan;
a = deg(alpha);
middle = point2D((left) ? width - rel.x/2:point.x + rel.x/2,rel.y/2);
var gamma = alpha - Math.atan2(middle.y,middle.x),distance = Math.max(0,Math.sin(gamma) * Math.sqrt(Math.pow(middle.x,2) + Math.pow(middle.y,2)));
tr = point2D(distance * Math.sin(alpha),distance * Math.cos(alpha));
if (alpha > A90){
tr.x = tr.x + Math.abs(tr.y * Math.tan(tan));
tr.y = 0;
if (Math.round(tr.x*Math.tan(PI-alpha)) < height){
point.y = Math.sqrt(Math.pow(height,2)+2 * middle.x * rel.x);
if (top) point.y = height - point.y;
return compute();
}
}
if (alpha>A90){
var beta = PI-alpha,dd = h - height/Math.sin(beta);
mv = point2D(Math.round(dd*Math.cos(beta)),Math.round(dd*Math.sin(beta)));
if (left) mv.x = - mv.x;
if (top) mv.y = - mv.y;
}
px = Math.round(tr.y/Math.tan(alpha) + tr.x);
var side = width - px,sideX = side*Math.cos(alpha*2),sideY = side*Math.sin(alpha*2);
df = point2D(Math.round( (left ? side -sideX:px+sideX)),Math.round((top) ? sideY:height - sideY));
// GRADIENTSgradientSize = side*Math.sin(alpha);
var endingPoint = flipMethods._c2.call(that,point.corner),far = Math.sqrt(Math.pow(endingPoint.x-point.x,2)+Math.pow(endingPoint.y-point.y,2));
gradientOpacity = (far<width) ? far/width:1;
if (data.opts.frontGradient){
gradientStartV = gradientSize>100 ? (gradientSize-100)/gradientSize:0;
gradientEndPointA = point2D(gradientSize*Math.sin(A90-alpha)/height*100,gradientSize*Math.cos(A90-alpha)/width*100);
if (top) gradientEndPointA.y = 100-gradientEndPointA.y;
if (left) gradientEndPointA.x = 100-gradientEndPointA.x;
}
if (flipMethods._backGradient.call(that)){
gradientEndPointB = point2D(gradientSize*Math.sin(alpha)/width*100,gradientSize*Math.cos(alpha)/height*100);
if (!left) gradientEndPointB.x = 100-gradientEndPointB.x;
if (!top) gradientEndPointB.y = 100-gradientEndPointB.y;
}
//tr.x = Math.round(tr.x);
tr.y = Math.round(tr.y);
return true;
}
,transform = function(tr,c,x,a){
var f = ['0','auto'],mvW = (width-h)*x[0]/100,mvH = (height-h)*x[1]/100,v ={
left:f[c[0]],top:f[c[1]],right:f[c[2]],bottom:f[c[3]]}
,aliasingFk = (a!=90 && a!=-90) ? (left ? -1:1):0;
x = x[0] + '% ' + x[1] + '%';
that.css(v).transform(rotate(a) + translate(tr.x + aliasingFk,tr.y,ac),x);
data.fpage.parent().css(v);
data.wrapper.transform(translate(-tr.x + mvW-aliasingFk,-tr.y + mvH,ac) + rotate(-a),x);
data.fwrapper.transform(translate(-tr.x + mv.x + mvW,-tr.y + mv.y + mvH,ac) + rotate(-a),x);
data.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x,tr.y + df.y - mv.y,ac),x);
if (data.opts.frontGradient)gradient(data.ashadow,point2D(left?100:0,top?100:0),point2D(gradientEndPointA.x,gradientEndPointA.y),[[gradientStartV,'rgba(0,0,0,0)'],[((1-gradientStartV)*0.8)+gradientStartV,'rgba(0,0,0,'+(0.2*gradientOpacity)+')'],[1,'rgba(255,255,255,'+(0.2*gradientOpacity)+')']],3,alpha);
if (flipMethods._backGradient.call(that))gradient(data.bshadow,point2D(left?0:100,top?0:100),point2D(gradientEndPointB.x,gradientEndPointB.y),[[0.8,'rgba(0,0,0,0)'],[1,'rgba(0,0,0,'+(0.3*gradientOpacity)+')'],[1,'rgba(0,0,0,0)']],3);
}
;
switch (point.corner){
case 'tl':point.x = Math.max(point.x,1);
compute();
transform(tr,[1,0,0,1],[100,0],a);
data.fpage.transform(translate(-height,-width,ac) + rotate(90-a*2),'100% 100%');
folding.transform(rotate(90) + translate(0,-height,ac),'0% 0%');
break;
case 'tr':point.x = Math.min(point.x,width-1);
compute();
transform(point2D(-tr.x,tr.y),[0,0,0,1],[0,0],-a);
data.fpage.transform(translate(0,-width,ac) + rotate(-90+a*2),'0% 100%');
folding.transform(rotate(270) + translate(-width,0,ac),'0% 0%');
break;
case 'bl':point.x = Math.max(point.x,1);
compute();
transform(point2D(tr.x,-tr.y),[1,1,0,0],[100,100],-a);
data.fpage.transform(translate(-height,0,ac) + rotate(-90+a*2),'100% 0%');
folding.transform(rotate(270) + translate(-width,0,ac),'0% 0%');
break;
case 'br':point.x = Math.min(point.x,width-1);
compute();
transform(point2D(-tr.x,-tr.y),[0,1,1,0],[0,100],a);
data.fpage.transform(rotate(90-a*2),'0% 0%');
folding.transform(rotate(90) + translate(0,-height,ac),'0% 0%');
break;
}
data.point = point;
}
,_moveFoldingPage:function(bool){
var data = this.data().f,folding = flipMethods._foldingPage.call(this);
if (folding){
if (bool){
if (!data.fpage.children()[data.ashadow? '1':'0']){
flipMethods.setData.call(this,{
backParent:folding.parent()}
);
data.fpage.prepend(folding);
}
}
else{
if (data.backParent)data.backParent.prepend(folding);
}
}
}
,_showFoldedPage:function(c,animate){
var folding = flipMethods._foldingPage.call(this),dd = this.data(),data = dd.f;
if (!data.point || data.point.corner!=c.corner){
var event = $.Event('start');
this.trigger(event,[data.opts,c.corner]);
if (event.isDefaultPrevented())return false;
}
if (folding){
if (animate){
var that = this,point = (data.point && data.point.corner==c.corner) ? data.point:flipMethods._c.call(this,c.corner,1);
this.animatef({
from:[point.x,point.y],to:[c.x,c.y],duration:500,frame:function(v){
c.x = Math.round(v[0]);
c.y = Math.round(v[1]);
flipMethods._fold.call(that,c);
}
}
);
}
else{
flipMethods._fold.call(this,c);
if (dd.effect && !dd.effect.turning)this.animatef(false);
}
if (!data.fwrapper.is(':visible')){
data.fparent.show().data().flips++;
flipMethods._moveFoldingPage.call(this,true);
data.fwrapper.show();
if (data.bshadow)data.bshadow.show();
}
return true;
}
return false;
}
,hide:function(){
var data = this.data().f,folding = flipMethods._foldingPage.call(this);
if ((--data.fparent.data().flips)===0)data.fparent.hide();
this.css({
left:0,top:0,right:'auto',bottom:'auto'}
).transform('','0% 100%');
data.wrapper.transform('','0% 100%');
data.fwrapper.hide();
if (data.bshadow)data.bshadow.hide();
folding.transform('','0% 0%');
return this;
}
,hideFoldedPage:function(animate){
var data = this.data().f;
if (!data.point) return;
var that = this,p1 = data.point,hide = function(){
data.point = null;
that.flip('hide');
that.trigger('end',[false]);
}
;
if (animate){
var p4 = flipMethods._c.call(this,p1.corner),top = (p1.corner.substr(0,1)=='t'),delta = (top) ? Math.min(0,p1.y-p4.y)/2:Math.max(0,p1.y-p4.y)/2,p2 = point2D(p1.x,p1.y+delta),p3 = point2D(p4.x,p4.y-delta);
this.animatef({
from:0,to:1,frame:function(v){
var np = bezier(p1,p2,p3,p4,v);
p1.x = np.x;
p1.y = np.y;
flipMethods._fold.call(that,p1);
}
,complete:hide,duration:800,hiding:true}
);
}
else{
this.animatef(false);
hide();
}
}
,turnPage:function(corner){
var that = this,data = this.data().f;
corner ={
corner:(data.corner) ? data.corner.corner:corner || flipMethods._cAllowed.call(this)[0]}
;
var p1 = data.point || flipMethods._c.call(this,corner.corner,(data.opts.turn) ? data.opts.turn.data().opts.elevation:0),p4 = flipMethods._c2.call(this,corner.corner);
this.trigger('flip').animatef({
from:0,to:1,frame:function(v){
var np = bezier(p1,p1,p4,p4,v);
corner.x = np.x;
corner.y = np.y;
flipMethods._showFoldedPage.call(that,corner);
}
,complete:function(){
that.trigger('end',[true]);
}
,duration:data.opts.duration,turning:true}
);
data.corner = null;
}
,moving:function(){
return 'effect' in this.data();
}
,isTurning:function(){
return this.flip('moving') && this.data().effect.turning;
}
,_eventStart:function(e){
var data = this.data().f;
if (!data.disabled && !this.flip('isTurning')){
data.corner = flipMethods._cornerActivated.call(this,e);
if (data.corner && flipMethods._foldingPage.call(this,data.corner)){
flipMethods._moveFoldingPage.call(this,true);
this.trigger('pressed',[data.point]);
return false;
}
elsedata.corner = null;
}
}
,_eventMove:function(e){
var data = this.data().f;
if (!data.disabled){
e = (isTouch) ? e.originalEvent.touches:[e];
if (data.corner){
var pos = data.parent.offset();
data.corner.x = e[0].pageX-pos.left;
data.corner.y = e[0].pageY-pos.top;
flipMethods._showFoldedPage.call(this,data.corner);
}
else if (!this.data().effect && this.is(':visible')){
// roll overvar corner = flipMethods._cornerActivated.call(this,e[0]);
if (corner){
var origin = flipMethods._c.call(this,corner.corner,data.opts.cornerSize/2);
corner.x = origin.x;
corner.y = origin.y;
flipMethods._showFoldedPage.call(this,corner,true);
}
elseflipMethods.hideFoldedPage.call(this,true);
}
}
}
,_eventEnd:function(){
var data = this.data().f;
if (!data.disabled && data.point){
var event = $.Event('released');
this.trigger(event,[data.point]);
if (!event.isDefaultPrevented())flipMethods.hideFoldedPage.call(this,true);
}
data.corner = null;
}
,disable:function(disable){
flipMethods.setData.call(this,{
'disabled':disable}
);
return this;
}
}
,cla = function(that,methods,args){
if (!args[0] || typeof(args[0])=='object')return methods.init.apply(that,args);
else if(methods[args[0]] && args[0].toString().substr(0,1)!='_')return methods[args[0]].apply(that,Array.prototype.slice.call(args,1));
elsethrow args[0] + ' is an invalid value';
}
;
$.extend($.fn,{
flip:function(req,opts){
return cla(this,flipMethods,arguments);
}
,turn:function(req){
return cla(this,turnMethods,arguments);
}
,transform:function(transform,origin){
var properties ={
}
;
if (origin)properties[vendor+'transform-origin'] = origin;
properties[vendor+'transform'] = transform;
return this.css(properties);
}
,animatef:function(point){
var data = this.data();
if (data.effect)clearInterval(data.effect.handle);
if (point){
if (!point.to.length) point.to = [point.to];
if (!point.from.length) point.from = [point.from];
if (!point.easing) point.easing = function (x,t,b,c,data){
return c * Math.sqrt(1 - (t=t/data-1)*t) + b;
}
;
var j,diff = [],len = point.to.length,that = this,fps = point.fps || 30,time = - fps,f = function(){
var j,v = [];
time = Math.min(point.duration,time + fps);
for (j = 0;
j < len;
j++)v.push(point.easing(1,time,point.from[j],diff[j],point.duration));
point.frame((len==1) ? v[0]:v);
if (time==point.duration){
clearInterval(data.effect.handle);
delete data['effect'];
that.data(data);
if (point.complete)point.complete();
}
}
;
for (j = 0;
j < len;
j++)diff.push(point.to[j] - point.from[j]);
data.effect = point;
data.effect.handle = setInterval(f,fps);
this.data(data);
f();
}
else{
delete data['effect'];
}
}
}
);
$.isTouch = isTouch;
}
)(jQuery);
CSS代码(reset.css):
/* -------------------------------------------------------------- reset.css * Resets default browser CSS.-------------------------------------------------------------- */
#fb7,#fb7 a,#fb7 abbr,#fb7 address,#fb7 article,#fb7 aside,#fb7 audio,#fb7 b,#fb7 blockquote,#fb7 button,#fb7 canvas,#fb7 caption,#fb7 cite,#fb7 code,#fb7 dd,#fb7 del,#fb7 details,#fb7 dfn,#fb7 div,#fb7 dl,#fb7 dt,#fb7 em,#fb7 embed,#fb7 fieldset,#fb7 figcaption,#fb7 figure,#fb7 footer,#fb7 form,#fb7 h1,#fb7 h2,#fb7 h3,#fb7 h4,#fb7 h5,#fb7 h6,#fb7 header,#fb7 hgroup,#fb7 i,#fb7 iframe,#fb7 img,#fb7 ins,#fb7 kbd,#fb7 label,#fb7 legend,#fb7.fb6 li,#fb7 mark,#fb7 menu,#fb7 nav,#fb7 object,#fb7 ol,#fb7 p,#fb7 pre,#fb7 q,#fb7 samp,#fb7 section,#fb7 small,#fb7 span,#fb7 sub,#fb7 summary,#fb7 sup,#fb7 table,#fb7 tbody,#fb7 td,#fb7 tfoot,#fb7 th,#fb7 thead,#fb7 time,#fb7 tr,#fb7 ul,#fb7 var,#fb7 video,#fb7 input{margin:0;padding:0;border:0;border-radius:0;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;line-height:1.5;text-align:left;box-shadow:none;text-shadow:none;overflow:visible;background:none;list-style:none;background-image:nonedisplay:none;box-sizing:content-box;-moz-box-sizing:content-box;}
#fb7.fb6 li,#fb7 li:before,#fb7:after{content:none;}
#fb7 img{}
#fb7 article,#fb7 aside,#fb7 canvas,#fb7 details,#fb7 figcaption,#fb7 figure,#fb7 footer,#fb7 header,#fb7 hgroup,#fb7 menu,#fb7 nav,#fb7 section,#fb7 summary{display:block;}
#fb7 a,#fb7 ins,#fb7 del{text-decoration:none;}
#fb7 ul,#fb7 ol{list-style:none;text-indent:0px;margin:0 !important;}
#fb7 table{border-spacing:0;border-collapse:collapse;}
#fb7 caption,#fb7 th{text-align:left;}
#fb7 q:after,#fb7 q:before{content:"";}
#fb7 a,#fb7 button:hover{cursor:pointer;}
#fb7 input,#fb7 textarea{outline:none;}
CSS代码(static.css):
/* = Menu-------------------------------------------------------------- */
#fb7 .fb7-menu{}
#fb7 .fb7-menu ul{list-style:none;margin:15px 0;padding:0;}
#fb7 .fb7-menu li{float:left;position:relative;width:38px;height:65px;margin:0;padding:0px 2px 0 2px;list-style:none;/*background:url(../img/icons.png) no-repeat/*/
background-position:-39px 0px;border:0px solid #F00;}
#fb7 .fb7-menu li:last-child{background-position:-76px 0px;padding:0;width:48px;}
#fb7 .fb7-menu li:first-child{background-position:0px 0px;padding:0;width:48px;}
#fb7 .fb7-menu li a{display:block;background:inherit;width:38px;height:65px;margin:-37px 0px;}
#fb7 .fb7-menu li a.fb7-download{background-position:0 -65px;}
#fb7 .fb7-menu li a.fb7-download:hover{background-position:0 -130px;}
#fb7 .fb7-menu li a.fb7-home{background-position:-228px -65px;}
#fb7 .fb7-menu li a.fb7-home:hover{background-position:-228px -130px;}
#fb7 .fb7-menu li a.contact{background-position:-226px -5px;}
#fb7 .fb7-menu li a.contact:hover{background-position:-226px -5px;}
#fb7 .fb7-menu li a.fb7-fullscreen{background-position:-266px -65px;}
#fb7 .fb7-menu li a.fb7-fullscreen:hover{background-position:-266px -130px;}
#fb7 .fb7-menu li a.fb7-show-all{background-position:-190px -65px;}
#fb7 .fb7-menu li a.fb7-show-all:hover{background-position:-190px -130px;}
#fb7 .fb7-menu li a.fb7-zoom-auto{background-position:-114px -65px;}
#fb7 .fb7-menu li a.fb7-zoom-auto:hover{background-position:-114px -130px;}
#fb7 .fb7-menu li a.fb7-zoom-in{background-position:-76px -65px;}
#fb7 .fb7-menu li a.fb7-zoom-in:hover{background-position:-76px -130px;}
#fb7 .fb7-menu li a.fb7-zoom-original{background-position:-152px -65px;}
#fb7 .fb7-menu li a.fb7-zoom-original:hover{background-position:-152px -130px;}
#fb7 .fb7-menu li a.fb7-zoom-out{background-position:-37px -65px;}
#fb7 .fb7-menu li a.fb7-zoom-out:hover{background-position:-37px -130px;}
#fb7 .fb7-menu#fb7-center{width:auto;margin-top:14px;margin-down:0;position:absolute;/*margin-left:auto;margin-right:auto;/*/
}
#fb7 .fb7-menu#fb7-right{float:right;width:auto;margin:15px 6px 0 0;}
#fb7 .fb7-menu#fb7-right li{background:none;}
#fb7 .fb7-menu li.fb7-goto{position:relative;width:auto;margin:-6px 4px 0px 0;padding:6px 0 0 10px;}
#fb7 .fb7-menu li.fb7-goto #fb7-label-page-number{font-family:Arial,sans-serif;display:inline;float:left;margin:6px 5px 0 0;line-height:12px;font-size:10px;font-weight:bold;color:#5f6f7b;-webkit-font-smoothing:antialiased;width:auto;}
#fb7 .fb7-menu li.fb7-goto input[type='text']{background:#141f28;width:28px;height:29px;padding:0 25px 0 7px;text-align:center;font-size:14px;font-family:Nunito;font-weight:bold;color:#616465;display:inline;border-radius:25px;box-shadow:inset 1px 2px 3px #CCCCCC;}
#fb7 .fb7-menu li.fb7-goto input[type='text'].focus_input{box-shadow:0 0 7px 2px #97dcea;}
#fb7 .fb7-menu li.fb7-goto button{text-shadow:none;font-family:Nunito,sans-serif;position:absolute;right:1px;top:7px;height:29px;width:40px;border:3px solid;border-top-right-radius:3em;border-bottom-right-radius:3em;/*border:1px solid #EBEEF0;/*/
display:inline;font-size:11px;text-align:center;font-weight:bold;padding:0 1px;background:#FF0000;color:#5f6f7b;cursor:pointer;}
#fb7 .ui-btn-text{display:none;}
/* = Tooltip-------------------------------------------------------------- */
#fb7 .fb7-tooltip{font-family:Nunito,sans-serif;position:absolute;left:0;top:-25px;z-index:5;display:none;padding:2px 10px;background:#64c8d3;white-space:nowrap;font-size:10px;font-weight:bold;/*text-transform:uppercase/*/
color:#616465;background:-webkit-linear-gradient(#FFFFFF,#EAEAEA);/* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(#FFFFFF,#EAEAEA);/* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(#FFFFFF,#EAEAEA);/* For Firefox 3.6 to 15 */
background:linear-gradient(#FFFFFF,#EAEAEA);/* Standard syntax */
border-radius:1px;border:1px solid #D4D4D4;box-shadow:0 0 1px 1px #DBDBDB;font-size:12px;}
/*#fb7 .fb7-tooltip b{border-right:10px solid rgba(0,0,0,0);border-top:10px solid #64c8d3;bottom:-7px;display:block;height:0;left:6px;position:absolute;width:0;}
/*/
/* = Footer-------------------------------------------------------------- */
#fb7 #fb7-footer{opacity:0;}
#fb7 #fb7-footer{position:absolute;bottom:0px;z-index:15;left:0px;/*background:url(../img/bg-footer.png);/*/
/*background-color:rgba(0,0,0,.55);/*/
/*border-top:3px solid #0A334A;/*/
width:100%;height:60px;margin:0;padding:0;}
#fb7 #fb7-footer #fb7-logo{position:absolute;left:10px;top:18px;z-index:5;}
#fb7 #fb7-footer .fb7-bcg-tools{background-color:#000000;height:100%;left:0;opacity:0.55;position:absolute;top:0;width:100%;}
分享到QQ
分享到微博
微信扫一扫
