以下是 html5手机端网页电子书翻页特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="monitor-signature" content="monitor:player:html5">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="image_src" href="files/shot.png">
<link rel="shortcut icon" href="files/thumb/1.jpg" />
<link rel="apple-touch-icon" href="files/thumb/1.jpg" />
<meta name="og:image" content="files/shot.png">
<meta property="og:image" content="files/shot.png">
<title>html5手机端网页电子书翻页特效</title>
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/player.css" />
<link rel="stylesheet" href="style/phoneTemplate.css" />
<script src="javascript/jquery-1.9.1.min.js"></script>
<script src="javascript/config.js"></script>
</head>
<body>
<script src="javascript/bookmark_config.js"></script>
<script src="javascript/LoadingJS.js"></script>
<script src="javascript/main.js"></script>
<link rel="stylesheet" href="style/template.css" />
<script type="text/javascript">
var sendvisitinfo = function(type,page){};
</script>
</body>
</html>JS代码(config.js):
var aliasConfig ={
appName:["","",""],totalPageCount:[],largePageWidth:[],largePageHeight:[],normalPath:[],largePath:[],thumbPath:[],ToolBarsSettings:[],TitleBar:[],appLogoIcon:["appLogoIcon"],appLogoLinkURL:["appLogoLinkURL"],bookTitle:[],bookDescription:[],ButtonsBar:[],ShareButton:[],ShareButtonVisible:["socialShareButtonVisible"],ThumbnailsButton:[],ThumbnailsButtonVisible:["enableThumbnail"],ZoomButton:[],ZoomButtonVisible:["enableZoomIn"],FlashDisplaySettings:[],MainBgConfig:[],bgBeginColor:["bgBeginColor"],bgEndColor:["bgEndColor"],bgMRotation:["bgMRotation"],backGroundImgURL:["mainbgImgUrl","innerMainbgImgUrl"],pageBackgroundColor:["pageBackgroundColor"],flipshortcutbutton:[],BookMargins:[],topMargin:[],bottomMargin:[],leftMargin:[],rightMargin:[],HTMLControlSettings:[],linkconfig:[],LinkDownColor:["linkOverColor"],LinkAlpha:["linkOverColorAlpha"],OpenWindow:["linkOpenedWindow"],searchColor:[],searchAlpha:[],SearchButtonVisible:["searchButtonVisible"],productName:[],homePage:[],enableAutoPlay:["autoPlayAutoStart"],autoPlayDuration:["autoPlayDuration"],autoPlayLoopCount:["autoPlayLoopCount"],BookMarkButtonVisible:[],googleAnalyticsID:["googleAnalyticsID"],OriginPageIndex:[],HardPageEnable:["isHardCover"],UIBaseURL:[],RightToLeft:["isRightToLeft"],LeftShadowWidth:["leftPageShadowWidth"],LeftShadowAlpha:["pageShadowAlpha"],RightShadowWidth:["rightPageShadowWidth"],RightShadowAlpha:["pageShadowAlpha"],ShortcutButtonHeight:[],ShortcutButtonWidth:[],AutoPlayButtonVisible:["enableAutoPlay"],DownloadButtonVisible:["enableDownload"],DownloadURL:["downloadURL"],HomeButtonVisible:["homeButtonVisible"],HomeURL:['btnHomeURL'],BackgroundSoundURL:['bacgroundSoundURL'],//TableOfContentButtonVisible:["BookMarkButtonVisible"],PrintButtonVisible:["enablePrint"],toolbarColor:["mainColor","barColor"],loadingBackground:["mainColor","barColor"],BackgroundSoundButtonVisible:["enableFlipSound"],FlipSound:["enableFlipSound"],MiniStyle:["userSmallMode"],retainBookCenter:["moveFlipBookToCenter"],totalPagesCaption:["totalPageNumberCaptionStr"],pageNumberCaption:["pageIndexCaptionStrs"]}
;
var aliasLanguage={
frmPrintbtn:["frmPrintCaption"],frmPrintall:["frmPrintPrintAll"],frmPrintcurrent:["frmPrintPrintCurrentPage"],frmPrintRange:["frmPrintPrintRange"],frmPrintexample:["frmPrintExampleCaption"],btnLanguage:["btnSwicthLanguage"],btnTableOfContent:["btnBookMark"]}
;
var bookConfig ={
appName:'flippdf',totalPageCount:0,largePageWidth:1080,largePageHeight:1440,normalPath:"files/page/",largePath:"files/large/",thumbPath:"files/thumb/",ToolBarsSettings:"",TitleBar:"",appLogoLinkURL:"",bookTitle:"FLIPBUILDER",bookDescription:"",ButtonsBar:"",ShareButton:"",ThumbnailsButton:"",ThumbnailsButtonVisible:"Show",ZoomButton:"",ZoomButtonVisible:"Yes",FlashDisplaySettings:"",MainBgConfig:"",bgBeginColor:"#cccccc",bgEndColor:"#eeeeee",bgMRotation:45,pageBackgroundColor:"#FFFFFF",flipshortcutbutton:"Show",BookMargins:"",topMargin:10,bottomMargin:10,leftMargin:10,rightMargin:10,HTMLControlSettings:"",linkconfig:"",LinkDownColor:"#808080",LinkAlpha:0.5,OpenWindow:"_Blank",BookMarkButtonVisible:'true',productName:'Demo created by Flip PDF',homePage:'http://sc.chinaz.com/',isFlipPdf:"true",TableOfContentButtonVisible:"true",searchTextJS:'javascript/search_config.js',searchPositionJS:undefined}
;
;
bookConfig.loadingCaption="Loading";
bookConfig.loadingCaptionColor="#DDDDDD";
bookConfig.loadingBackground="#000000";
bookConfig.appLogoIcon="files/extfiles/appLogoIcon.png";
bookConfig.appLogoLinkURL="http://sc.chinaz.com";
bookConfig.logoHeight="40";
bookConfig.logoPadding="0";
bookConfig.logoTop="0";
bookConfig.HomeURL="http://sc.chinaz.com";
bookConfig.appLogoOpenWindow="Blank";
bookConfig.toolbarColor="#000000";
bookConfig.iconColor="#ECF5FB";
bookConfig.pageNumColor="#333333";
bookConfig.iconFontColor="#FFFFFF";
bookConfig.FlipSound="Enable";
bookConfig.QRCode="Hide";
bookConfig.HomeButtonVisible="Hide";
bookConfig.ShareButtonVisible="Show";
bookConfig.ThumbnailsButtonVisible="Show";
bookConfig.thumbnailColor="#333333";
bookConfig.thumbnailAlpha="70";
bookConfig.ZoomButtonVisible="Yes";
bookConfig.BookMarkButtonVisible="Hide";
bookConfig.TableOfContentButtonVisible="Show";
bookConfig.bookmarkBackground="#000000";
bookConfig.bookmarkFontColor="#cccccc";
bookConfig.SearchButtonVisible="Show";
bookConfig.leastSearchChar="3";
bookConfig.searchFontColor="#FFFFFF";
bookConfig.PrintButtonVisible="Yes";
bookConfig.BackgroundSoundButtonVisible="Enable";
bookConfig.BackgroundSoundLoop="-1";
bookConfig.AutoPlayButtonVisible="Yes";
bookConfig.autoPlayAutoStart="No";
bookConfig.autoPlayDuration="9";
bookConfig.autoPlayLoopCount="1";
bookConfig.minZoomWidth="700";
bookConfig.minZoomHeight="518";
bookConfig.mouseWheelFlip="yes";
bookConfig.DownloadButtonVisible="Hide";
bookConfig.DownloadURL="http://sc.chinaz.com/";
bookConfig.enableDownload="Yes";
bookConfig.downloadURL="http://sc.chinaz.com/";
bookConfig.bgBeginColor="#E2E2E2";
bookConfig.bgEndColor="#E2E2E2";
bookConfig.bgMRotation="90";
bookConfig.backGroundImgURL="files/mobile-ext/backGroundImgURL.jpg";
bookConfig.LeftShadowWidth="90";
bookConfig.LeftShadowAlpha="0.6";
bookConfig.RightShadowWidth="55";
bookConfig.RightShadowAlpha="0.6";
bookConfig.HardPageEnable="No";
bookConfig.hardCoverBorderWidth="8";
bookConfig.borderColor="#572F0D";
bookConfig.outerCoverBorder="Yes";
bookConfig.cornerRound="8";
bookConfig.pageBackgroundColor="#E8E8E8";
bookConfig.flipshortcutbutton="Show";
bookConfig.BindingType="side";
bookConfig.RightToLeft="No";
bookConfig.flippingTime="0.3";
bookConfig.retainBookCenter="Yes";
bookConfig.FlipStyle="Flip";
bookConfig.showDoublePage="Yes";
bookConfig.topMargin="10";
bookConfig.bottomMargin="10";
bookConfig.leftMargin="10";
bookConfig.rightMargin="10";
bookConfig.leftMarginOnMobile="0";
bookConfig.topMarginOnMobile="0";
bookConfig.rightMarginOnMobile="0";
bookConfig.bottomMarginOnMobile="0";
bookConfig.maxWidthToSmallMode="400";
bookConfig.maxHeightToSmallMode="300";
bookConfig.LinkDownColor="#800080";
bookConfig.LinkAlpha="0.2";
bookConfig.OpenWindow="Blank";
bookConfig.showLinkHint="No";
bookConfig.searchFontColor="#FFFDDD";
bookConfig.totalPageCount=12;
bookConfig.largePageWidth=1024;
bookConfig.largePageHeight=1448;
;
bookConfig.securityType="1";
bookConfig.bookTitle="２０１６年《医师—妇产科》";
bookConfig.productName="站长素材";
bookConfig.homePage="http://sc.chinaz.com/";
bookConfig.searchPositionJS="javascript/search_config.js";
bookConfig.searchTextJS="javascript/search_config.js";
bookConfig.normalPath="files/mobile/";
bookConfig.largePath="files/mobile/";
bookConfig.thumbPath="files/thumb/";
bookConfig.userListPath="files/extfiles/users.js";
var language = [];
;
function orgt(s){
return binl2hex(core_hx(str2binl(s),s.length * chrsz));
}
;
;
var pageEditor ={
"setting":{
}
,"pageAnnos":[[],[],[],[],[],[],[],[],[],[],[],[]]}
;
bookConfig.hideMiniFullscreen=true;
if(language&&language.length>0&&language[0]&&language[0].language){
bookConfig.language=language[0].language;
}
try{
for(var i=0;
pageEditor!=undefined&&i<pageEditor.length;
i++){
if(pageEditor[i].length==0){
continue;
}
for(var j=0;
j<pageEditor[i].length;
j++){
var anno=pageEditor[i][j];
if(anno==undefined)continue;
if(anno.overAlpha==undefined){
anno.overAlpha=bookConfig.LinkAlpha;
}
if(anno.outAlpha==undefined){
anno.outAlpha=0;
}
if(anno.downAlpha==undefined){
anno.downAlpha=bookConfig.LinkAlpha;
}
if(anno.overColor==undefined){
anno.overColor=bookConfig.LinkDownColor;
}
if(anno.downColor==undefined){
anno.downColor=bookConfig.LinkDownColor;
}
if(anno.outColor==undefined){
anno.outColor=bookConfig.LinkDownColor;
}
if(anno.annotype=='com.mobiano.flipbook.pageeditor.TAnnoLink'){
anno.alpha=bookConfig.LinkAlpha;
}
}
}
}
catch(e){
}
try{
$.browser.device = 2;
}
catch(ee){
}
JS代码(fbscript.js):
var ua = navigator.userAgent.toLowerCase(),platform = navigator.platform.toLowerCase(),UA = ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/) || [null,'unknown',0],mode = UA[1] == 'ie' && document.documentMode;
var sUserAgent=ua;
var BR ={
extend:Function.prototype.extend,name:(UA[1] == 'version') ? UA[3]:UA[1],version:mode || parseFloat((UA[1] == 'opera' && UA[4]) ? UA[4]:UA[2]),Platform:{
name:ua.match(/ip(?:ad|od|hone)/) ? 'ios':(ua.match(/(?:webos|android|bada|symbian|palm|blackberry)/) || platform.match(/mac|win|linux/) || ['other'])[0]}
,Features:{
xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.querySelector),json:!!(window.JSON)}
,Plugins:{
}
,isPad:/pad/.test(sUserAgent) || /ipod/.test(sUserAgent),isIPhone:/iphone/.test(sUserAgent),isWinPhone:/wpdesktop/.test(sUserAgent),isBlackBerry:/blackberry/.test(sUserAgent),//isMobile:/mobile/.test(sUserAgent) || /phone/.test(sUserAgent)isMobile:(function(){
var check = false;
(function(a,b){
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true}
)(navigator.userAgent||navigator.vendor||window.opera);
return check||/mobile/.test(sUserAgent) || /phone/.test(sUserAgent);
}
)()}
;
//This function is invoked by SWFObject once the <object> has been createdvar callback = function (e){
//Only execute if SWFObject embed was successful if(!e.success || !e.ref){
//alert("No Flash Supported");
if('flipbuilder_hasMobile'=='flipbuilder_'+'hasMobile'){
delayToShowVersion("mobile/index.html")// window.location = "mobile/index.html";
}
else if(hasBasicHtml){
delayToShowVersion("files/basic-html/index.html");
}
else{
//no sutable fla}
// setTimeout("shutDownLoader()",1000);
return false;
}
}
;
// BR.Platform.name ='ios';
// if(BR.Platform.name == 'ios'||BR.Platform.name == 'android') window.location = "mobile/index.html";
// if( BR.Platform.name == 'webos' || BR.Platform.name == 'bada' || BR.Platform.name == 'symbian' || BR.Platform.name == 'palm' || BR.Platform.name == 'blackberry') window.location = dir+"assets/seo/page1.html";
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?"));
//.toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0;
iParam < aQueryString.length;
iParam++ ){
//if ( aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
if ( aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return unescape(strReturn);
}
var pageIndex=getURLParam('pageIndex');
if(!pageIndex){
pageIndex=-1;
}
var alwaysShowBookMark=getURLParam('alwaysShowBookMark');
if(!alwaysShowBookMark){
alwaysShowBookMark=false;
}
var alwaysShowThumbnails=getURLParam('alwaysShowThumbnails');
if(!alwaysShowThumbnails){
alwaysShowThumbnails=false;
}
var alwaysMinimeStyle=getURLParam('alwaysMinimeStyle');
if(!alwaysMinimeStyle){
alwaysMinimeStyle=false;
}
var currentHTMLURL= window.encodeURIComponent(window.location.href);
if(!currentHTMLURL){
currentHTMLURL='';
}
var pice=getURLParam('pice');
if(!pice){
pice=false;
}
var lang=getURLParam('lang');
if(!lang){
lang="NONE";
}
var itemValues=getURLParam('itemValues');
if(!itemValues){
itemValues="NONE";
}
<!-- For version detection,set to min. required Flash Player version,or 0 (or 0.0.0),for no version detection. --> var swfVersionStr = "10.0.0";
<!-- To use express install,set to playerProductInstall.swf,otherwise the empty string. --> var xiSwfUrlStr = "";
var flashvars ={
pageIndex:pageIndex,alwaysShowBookMark:alwaysShowBookMark,alwaysShowThumbnails:alwaysShowThumbnails,alwaysMinimeStyle:alwaysMinimeStyle,currentHTMLURL:currentHTMLURL,pice:pice,lang:lang,itemValues:itemValues}
;
var params ={
}
;
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.allowFullScreenInteractive = "true";
params.wmode = "transparent";
var attributes ={
}
;
attributes.id = "FlipBookBuilder";
attributes.name = "FlipBookBuilder";
attributes.align = "middle";
var hasMobileVersion=true;
var hasBasicHtmlVersion=true;
var callback = function (e){
//Only execute if SWFObject embed was successful if(!e.success || !e.ref){
//alert("No Flash Supported");
if(hasMobileVersion){
var pageIndex=getURLParam('pageIndex');
if(!pageIndex){
window.location = "mobile/index.html"+(window.location.hash?window.location.hash:'');
}
else{
window.location = "mobile/index.html#p="+pageIndex;
}
}
else if(hasBasicHtmlVersion){
window.location ='files/basic-html/index.html';
}
else{
document.write("Sorry,need flash player. <a href='http://www.adobe.com/go/getflashplayer'>Get Adobe Flash Player<\/a> it's possible to <a id='linkSEO' href='files/basic-html/index.html'>view a simplified version of the book on any device</a>,or you can view the mobile version <a href='mobile/index.html'> here </a>" );
}
return false;
}
}
;
var forceOld=false;
function detectAndGoVersion(loadType){
if(forceOld){
swfobject.embedSWF( "book.swf","flashContent","100%","100%",swfVersionStr,xiSwfUrlStr,flashvars,params,attributes);
swfobject.createCSS("#flashContent","display:block;
text-align:left;
");
return;
}
var pageIndex=getURLParam('pageIndex');
if(!pageIndex){
pageIndex=-1;
}
if(BR.isMobile){
if(hasMobileVersion){
if(pageIndex!=-1){
window.location = "mobile/index.html#p="+pageIndex;
}
else{
window.location = "mobile/index.html"+(window.location.hash?window.location.hash:'');
//window.location = "mobile/index.html";
}
}
else if(hasBasicHtmlVersion){
window.location ='files/basic-html/index.html';
}
else{
swfobject.embedSWF( "book.swf","flashContent","100%","100%",swfVersionStr,xiSwfUrlStr,flashvars,params,attributes,callback);
swfobject.createCSS("#flashContent","display:block;
text-align:left;
");
}
}
else{
if(loadType==2){
if(hasMobileVersion){
if(pageIndex!=-1){
window.location = "mobile/index.html#p="+pageIndex;
}
else{
window.location = "mobile/index.html"+(window.location.hash?window.location.hash:'');
//window.location = "mobile/index.html";
}
return;
}
}
swfobject.embedSWF( "book.swf","flashContent","100%","100%",swfVersionStr,xiSwfUrlStr,flashvars,params,attributes,callback);
swfobject.createCSS("#flashContent","display:block;
text-align:left;
");
}
}
detectAndGoVersion();
JS代码(LoadingJS.js):
function LoadingJS(){
this.loadBookConfig();
//#1F2232,#DDDDDDthis.body = $("body");
this.instance = $("<div id='loading_bg'></div>");
this.proTitle = $("<div id='progress_title'></div>");
this.stepTitle = $("<div id='step_title'></div>");
this.loadingBG = $("<div id='loading_progres'></div>");
this.loadingItem = $("<div id='loading_progress_item'></div>");
this.instance.css({
"display":"none","position":"absolute","width":"480px","height":"70px",'top':'50%','left':'50%','margin-left':'-240px','margin-top':'-35px',"z-index":10000,"background-color":"transparent"}
);
//this.addGradient(this.instance,"#B3B3B3","white");
/*"background-color":"#1F2232","border-radius":"3px","border":"1px solid #DCDCDC","box-shadow":"2px 2px 2px #333333","-mz-box-shadow":"2px 2px 2px #333333","-ms-box-shadow":"2px 2px 2px #333333","-webkit-box-shadow":"2px 2px 2px #333333","-o-box-shadow":"2px 2px 2px #333333" */
this.proTitle.css({
"position":"absolute","left":"10px","top":"10px","width":"460px","text-align":"center","font-family":"Tahoma","font-size":"24px","color":"white","word-break":"keep-all","white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}
);
this.proTitle.css({
"text-shadow":"0 0 5px #8c97cb,0 0 10px #8c97cb,0 0 15px #8c97cb"}
);
this.loadingBG.css({
"position":"absolute","width":"280px","height":"10px","left":"10px","top":"35px","background-color":"#F3F4F9","border-radius":"2px","display":"none"}
);
this.loadingItem.css({
"position":"absolute","width":"0px","height":"10px","left":"0px","top":"0px","background-color":"#3FB5F2","border-radius":"2px","display":"none"}
);
this.stepTitle.css({
"position":"absolute","left":"10px","top":"50px","width":"460px","text-align":"center","font-family":"Tahoma","font-size":"12px","color":this.loadingCaptionColor,"word-break":"keep-all","white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}
);
//this.body.css({
"background-color":this.backgroundColor}
);
this.initBackground();
this.body.append(this.instance);
this.instance.append(this.proTitle);
this.instance.append(this.loadingBG);
this.instance.append(this.stepTitle);
this.loadingBG.append(this.loadingItem);
this.init();
this.addLoadingImage();
this.show();
}
LoadingJS.prototype ={
loadBookConfig:function(){
this.loadingCaption,this.loadingCaptionColor,this.hasLoadingPicture,this.loadingPicture;
try{
this.loadingCaption = bookConfig.loadingCaption?bookConfig.loadingCaption:"Loading";
this.loadingCaptionColor = bookConfig.loadingCaptionColor?bookConfig.loadingCaptionColor:"#DDDDDD";
this.loadingBackground = bookConfig.loadingBackground?bookConfig.loadingBackground:"#1F2232";
this.loadingPicture = bookConfig.loadingPicture?bookConfig.loadingPicture:"";
this.hasLoadingPicture = (this.loadingPicture != "");
}
catch(err){
this.loadingCaption = "Loading";
this.loadingCaptionColor = "#DDDDDD";
this.hasLoadingPicture = false;
this.loadingPicture = "";
}
//console.log("loadingPicture:%s",this.loadingPicture);
}
,init:function(){
var doc = $(document);
var windowWidth = doc.width(),windowHeight = Math.max(doc.height(),400),progressWidth = 480,progressHeight = 70;
var progressLeft = (windowWidth - progressWidth) / 2,progressTop = (windowHeight - progressHeight) / 2;
// this.instance.css({
"left":progressLeft + "px","top":progressTop + "px"}
);
this.proTitle.text($(document).attr("title"));
this.stepTitle.text(this.loadingCaption + "...");
var self = this,iWidth = 0,iStep = 2;
var oldColor = this.colorSplit("#3FB5F2");
this.timer = window.setInterval(function(){
/*var pAddR = Math.floor((255 - oldColor.r) * iWidth / 280),pAddG = Math.floor((255 - oldColor.g) * iWidth / 280),pAddB = Math.floor((255 - oldColor.b) * iWidth / 280);
var newEndColor = self.colorAdd("#3FB5F2",pAddR,pAddG,pAddB);
self.addGradient(self.loadingItem,"#3FB5F2",newEndColor);
self.loadingItem.css({
width:iWidth +"px"}
);
iWidth += iStep;
if(iWidth == 280) iWidth = 0;
*/
iWidth += iStep;
var iCount = Math.floor(iWidth / 50) % 3;
switch(iCount){
case 0:{
self.stepTitle.text(self.loadingCaption + ". ");
break;
}
case 1:{
self.stepTitle.text(self.loadingCaption + ".. ");
break;
}
case 2:{
self.stepTitle.text(self.loadingCaption + "...");
break;
}
default:break;
}
}
,40);
}
,show:function(){
this.instance.css({
"display":"block"}
);
}
,addLoadingImage:function(){
if(this.hasLoadingPicture == false) return;
this.loadingImg = $("<img style='display:none;
position:absolute;
z-index:10000'></img>");
var self = this;
this.loadingImg.load(function(){
var doc = $(document),windowWidth = doc.width(),oImage = self.loadingImg[0];
var iImageWidth = oImage.naturalWidth,iImageHeight = oImage.naturalHeight;
var iInstanceTop;
try{
iInstanceTop = parseInt(self.instance.css("top").replace("px","")) + parseInt(self.instance.css("margin-top").replace("px",""));
}
catch(err){
iInstanceTop = iImageHeight;
}
var iLeft = (windowWidth - iImageWidth) / 2,iTop = iInstanceTop - iImageHeight;
//console.log("image loaded,left:%d,top:%d,width:%d,height:%d",iLeft,iTop,iImageWidth,iImageHeight);
self.loadingImg.css({
"left":iLeft + "px","top":iTop + "px","width":iImageWidth + "px","height":iImageHeight + "px","display":"block"}
);
}
);
this.loadingImg.attr("src",this.loadingPicture);
this.body.append(this.loadingImg);
}
,destroy:function(){
window.clearInterval(this.timer);
this.body.css({
"background-color":""}
);
this.instance.css({
"display":"none","z-index":1}
);
this.instance.empty();
this.instance.remove();
if(this.loadingImg){
this.loadingImg.css({
"display":"none","z-index":1}
);
this.loadingImg.remove();
}
}
,getBrowserType:function(){
var isIE11 = function(){
var userAgent = navigator.userAgent.toLowerCase();
return (!$.browser.msie) && (userAgent.indexOf("trident") > 0);
}
;
var browserType = 0;
if($.browser.msie || isIE11()){
browserType = 3;
}
else if($.browser.mozilla && !isIE11()){
browserType = 2;
}
else if($.browser.safari){
browserType = 1;
}
else if($.browser.opera){
browserType = 4;
}
;
return browserType;
}
,addGradient:function(item,beginColor,endColor){
var browserType = this.getBrowserType();
var sLeft = "",sMsLeft="0";
var horz = true;
if(horz){
sLeft = "left,";
sMsLeft="1";
}
item.css({
background:"linear-gradient("+ sLeft + beginColor +","+ endColor +")"}
);
switch(browserType){
case 1:{
item.css({
background:"-webkit-linear-gradient("+ sLeft + beginColor +","+ endColor +")"}
);
break;
}
case 2:{
item.css({
background:"-moz-linear-gradient("+ sLeft + beginColor +","+ endColor +")"}
);
break;
}
case 3:{
item.css({
background:"-ms-linear-gradient("+ sLeft + beginColor +","+ endColor +")"}
);
item.css("filter","progid:DXImageTransform.Microsoft.Gradient(GradientType="+ sMsLeft +",EndColorStr=" +endColor + ",StartColorStr=" + beginColor + ")");
break;
}
case 4:{
item.css({
background:"-o-linear-gradient("+ sLeft + beginColor +","+ endColor +")"}
);
break;
}
}
}
,colorSplit:function(color){
var colorRGB ={
r:0,g:0,b:0}
;
var red = "FF",green ="FF",blue = "FF";
if(color.length == 7){
red = color.substr(1,2);
green = color.substr(3,2);
blue = color.substr(5,2);
}
else if(color.length == 4){
red = color.substr(1,1);
green = color.substr(2,1);
blue = color.substr(3,1);
red += red;
green += green;
blue += blue;
}
colorRGB.r = parseInt(red,16);
colorRGB.g = parseInt(green,16);
colorRGB.b = parseInt(blue,16);
return colorRGB;
}
,colorAdd:function(color,addR,addG,addB){
var colorRGB = this.colorSplit(color);
colorRGB.r = Math.min(colorRGB.r + addR,255).toString(16);
colorRGB.g = Math.min(colorRGB.g + addG,255).toString(16);
colorRGB.b = Math.min(colorRGB.b + addB,255).toString(16);
colorRGB.r = (colorRGB.r.length <= 1) ? '0' + colorRGB.r:colorRGB.r;
colorRGB.g = (colorRGB.g.length <= 1) ? '0' + colorRGB.g:colorRGB.g;
colorRGB.b = (colorRGB.b.length <= 1) ? '0' + colorRGB.b:colorRGB.b;
return '#' + colorRGB.r + colorRGB.g + colorRGB.b;
}
,initStatus:function(){
window.clearInterval(this.timer);
//this.stepTitle.text("Initialization...");
}
,initBackground:function(){
this.body.css({
"background-color":this.loadingBackground}
);
/*var beginColor,endColor,angle;
try{
beginColor = bookConfig.bgBeginColor;
endColor = bookConfig.bgEndColor;
angle = bookConfig.bgMRotation;
}
catch(err){
beginColor = "#1F2232";
endColor = "#1F2232";
angle = 90;
}
if(beginColor == undefined) beginColor = "#1F2232";
if(endColor == undefined) endColor = "#1F2232";
if(angle == undefined) angle = 90;
var angleStr = "0% 0%,100% 0%";
switch(angle){
case 45:angleStr = "0% 0%,100% 100%";
break;
case 90:angleStr = "0% 0%,0% 100%";
break;
case 135:angleStr = "100% 0%,0% 100%";
break;
case 180:angleStr = "100% 0%,0% 0%";
case 0:angleStr = "0% 0%,100% 0%";
break;
}
var browserType = this.getBrowserType();
if(browserType == 1){
this.body.css("background-image","-webkit-gradient(linear," + angleStr + ",from(" + beginColor + "),to(" + endColor + "))");
}
else if(browserType == 2){
this.body.css("background-image","-moz-linear-gradient(left " + _angle + "deg," + beginColor + "," + endColor + ")");
}
else if(browserType == 3){
this.body.css("filter","progid:DXImageTransform.Microsoft.Gradient(GradientType=1,EndColorStr=" +endColor + ",StartColorStr=" + beginColor + ");
");
}
;
*/
}
}
;
var jsLoadingBar = new LoadingJS();
CSS代码(template.css):
.thumbBar{position:absolute;z-index:100;}
.outThumbBG{position:absolute;overflow:hidden;/*background-color:#000000;*/
/*opacity:0.9;*/
}
.thumbBG{position:absolute;/*background-color:#000000;*/
/*opacity:0.9;*/
}
.thumbBox{position:absolute;}
.thumbItem{position:absolute;}
a,button{cursor:pointer;}
.numbering{position:absolute;}
.numberingText{position:absolute;}
.numberingText:after{top:100%;border:10px solid transparent;content:" ";width:0;height:0;position:absolute;pointer-events:none;}
.numberingText:after{border-top-color:#eee;border-width:4px;left:50%;margin-left:-4px;opacity:0.9;}
.bottom.right,.bottom.right button,.bottom.right .numbering{position:absolute;top:2px;left:auto;}
a,button{cursor:pointer;}
.bottom.right{padding-right:10px;}
.bottom.left,.bottom.left button,.bottom.left .numbering{position:absolute;top:2px;right:auto;}
a,button{cursor:pointer;}
.bottom.right{padding-right:10px;}
.fbTopBar{overflow:hidden;position:absolute;z-index:99;top:-50px;left:0px;right:0px;height:42px;opacity:0.95;border-radius:0px 0px 10px 10px;}
.fbToolBar{overflow:hidden;position:absolute;z-index:99;bottom:-45px;left:0px;right:0px;height:42px;border-radius:5px 5px 5px 5px;/** border-left-width:0;border-right-width:0;text-shadow:0 -1px 1px #000000;font-family:Verdana,sans-serif;font-size:12px;color:white;background-color:#111111;*/
/* background:gradient(linear,left top,left bottom,from(#333333),to(black));background:-webkit-gradient(linear,left top,left bottom,from(#333333),to(black));background:-moz-linear-gradient(top,#333333,black);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='black');-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='black');*/
opacity:0.95;}
.fbToolBar button,.fbTopBar button{width:45px;height:33px;padding:2px;/* margin:1px 0 0 3px;border-top:1px solid #8c8c8c;border-bottom:1px solid #333333;border-left:1px solid #666666;border-right:1px solid #404040;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:#404040;background:gradient(linear,left top,left bottom,from(#4d4d4d),to(#333333));background:-webkit-gradient(linear,left top,left bottom,from(#4d4d4d),to(#333333));background:-moz-linear-gradient(top,#4d4d4d,#333333);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d',endColorstr='#333333');-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d',endColorstr='#333333');*/
}
.halfCircleBtn{overflow:hidden;position:absolute;z-index:98;display:block;top:-8px;left:0px;right:0px;width:60px;height:30px;border-radius:0px 0px 30px 30px;background:#ccc;}
.numbering{bottom:3px;border-radius:5px;}
.dock{display:block;margin:0px auto;bottom:0px;/*width:100%;*/
text-align:center;position:absolute;/*overflow:hidden;*/
/*background:#ffff00;*/
}
.linea{display:inline-block;/*vertical-align:bottom;*/
margin:0px;padding:0px;position:relative;/*overflow:visible;*/
}
.linea img{-webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.5,transparent),to(rgba(255,255,255,0.3)));-moz-box-reflect:below 1px -moz-gradient(linear,left top,left bottom,from(transparent),color-stop(0.5,transparent),to(rgba(255,255,255,0.3)));}
.button{width:30px;height:30px;bottom:3px;border-radius:5px;position:absolute;}
.button img{margin-left:6px;margin-top:6px}
.numInnerShadow{background:#ffffff;border-radius:5px;height:18px;width:87px;border-right-width:0px;border-bottom-width:0px;-moz-box-shadow:inset 0 0 5px #555555;-webkit-box-shadow:inset 0 0 5px #555555;box-shadow:inset 0 0 5px #555555;-ms-box-shadow:inset 0 0 5px #555555;-o-box-shadow:inset 0 0 5px #555555;}
.searchInnerShadow{background:#ffffff;padding:3px;border-radius:0px;border-right-width:0px;border-bottom-width:0px;-moz-box-shadow:inset 0 0 5px #555555;-webkit-box-shadow:inset 0 0 5px #555555;box-shadow:inset 0 0 5px #555555;-ms-box-shadow:inset 0 0 5px #555555;-o-box-shadow:inset 0 0 5px #555555;}
分享到QQ
分享到微博
微信扫一扫
