最近、プロジェクトマネージャーが私のプロジェクトを練習しました。プロジェクトの要件は、本をひっくり返す効果を達成することでした。この要件を見た後、私は本当に混乱しました。どうしたの？私はジャワで生まれました。この問題は本当に私を困惑させました。その後、私は同僚の指導を受けました。彼は以前に本のFlipping BooksのPCバージョンを作成していました。彼はその時にturn.jsを使用しました。関連するAPIを確認した後、彼は突然、ターンを使用することで、このプロジェクトを引き継ぐための私の現在のすべてのニーズを完全に解決できることに気付きました。以下では、編集者が私の学習体験をあなたと共有します、あなたはそれを参照することができます
turn.jsの公式ウェブサイト：http：//www.turnjs.com/
プロジェクトが開始された後の私のプロジェクトの結果は次のとおりです。
実際のプロジェクトを見た後、このプロジェクトがどのように実装されているかを知ることに焦りますか？心配しないでください、私の開発プロセスを詳細に紹介させてください：
1。導入する必要があるスクリプトファイル
<link rel = "styleSheet" type = "text/css" href = "css/basic.css"/> <script type = "text/javascript" src = "js/jquery.js"> </scrip> <script = "text/javascript" src = "js/modernizr.2.2.5.3.min.js"> type = "text/javascript" src = "js/main.js"> </script>
2。HTMLコードの一部
<！doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = chrome ="/> <meta name = "viewport" content = "width =" width = device-width、iniveryable = meta = " content = "電話= no"> <meta name = "apple-mobile-web-app-capable" content = "yes"/> <meta name = "apple-mobile-web-app-app-app-status-status-bar-style" content = "black"/> <title>ターン。 href = "css/basic.css"/> <script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/modernizr.2.5.5.3.min.js"> </</<script = "テキスト/javascript" "" "" "" "" " src = "js/main.js"> </script> </head> <body> <div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </divg> <img src = "./ image/btn.gif" " style = "display：none;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display =" display：none; "> <div> </div> </div> </div> <img src =" ./ btn.gif " style = "display：none;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display：none;"> <div> </div> </div> </div> <img src = "" ./ btn.gif "style =" display = "display =" display：なし "/> <div> div> </div> </div> </div> <script> // custom imitation iPhoneポップアップレイヤー（// iOS確認boxjquery.fn.confirm = function（title、option、option、cancelcalls = {var defaults = {title：null、// what textcanceltext： 'confism' // ok btn text}; if（undefined === option）{option = {};} if（ 'function'！= typeof okcall）{okcall = $ .noop;} if（ 'function'！= typeof cancelcall）{cancelcall = $ .noop;} cancelcall：cancelcall}）; var $ dom = $（this）; var dom = $（ '<div>'）; var dom = $（ '<div>'）。 $（ '<a href = "＃"> </a>'）.html（o.canceltext）.appendto（dom_btn）; var btn_ok = $（ '<a href = "＃"> </a>'）.html（o.oktext）.appendto（dom_btn）; btn_cancel.on（e） {o.cancelcall（）; dom.remove（）; e.preventdefault（）;}）; btn_ok.on（ 'click'、function（e）{o.okcall（）; dom.remove（）; e.preventdefault（）; e.preventdefault（）; page $（ "。前page"）。bind（ "touchend"、function（）{var pagecount = $（ "。flipbook"）。 {}}）; //次のページ$（ "。次のページ"）） {$（ "。flipbook"）。turn（ 'page'、currentPage + 1）;} else {}}）; //ディレクトリページに戻る$（ "。return"）。 //ジャンプページの数}、function（）{}）;}）; </script> </body> </html>3.メインJS実装パーツ
//携帯電話window.onloadのタイプを判断= function（）{//alert($（window).height(）; var u = navigator.useragent; if（u.indexof（ 'android'）> || u.indexof（ 'linux'）> -1）{//電話// iOS.on（ 'Scroll.Elasticity'、function（e）{e.preventdefault（）;}）の上部と下の弾力性をシールド（ 'touchmove.elasticity'、function（e）{e.preventdefault（）;}）;} else if（u.indexof（ 'windows phone'） loading（）;} var date_start; var date_end; date_start = getNowformatdate（）; //画像の読み込みvar loading_img_url = ["./image/0001.jpg"、"、 "、"。/image/0002.jpg"、 "、"。/image/0003.jpg"、 "。 0006.jpg "、" ./ image/0007.jpg "、"、。/image/0008.jpg "、" ./ image/0009.jpg "、" ./ image/0010.jpg "、"。 /0011.jpg"、 "、"。/image/0012.jpg"、 "、"。/image/0013.jpg"、"./image/0014.jpg","./image/0015.jpg",",./image /0016.jpg"、 "。/image/0017.jpg"、" ,./image/0018.jpg"、"./image/0019.jpg"./image/0020.jpg"," "、"、 "./ image/0022.jpg"、 "、" ./ image/0023.jpg "、"、 "./ image/0024.jpg"、 "、" ./ image/0025.jpg "、"、 " e/0027.jpg "、"、 "、。/image/0028.jpg"、 "./ image/0029.jpg"、 "./ image/0030.jpg"、 "./ image/0031.jpg"、 " e/0032.jpg "、"、 "、"、。/image/0033.jpg "、"、 "./ image/0034.jpg"、 "。 Image/0037.jpg "、"、。/image/0038.jpg "、"、。/image/0039.jpg "、" ./ image/0040.jpg "、" ./ image/0041.jpg "、]; // loadページ関数loading（）{var numbers = 0; var length = loading_img_url.length for（var i = 0; i <length; i ++）{var img = new image（）; img.src = loading_img_url [i]; img.onerror = function（）{nughts +=（1 / and） 100; $（ '。番号'）。html（parseint（numbers） + "％"）; console.log（numbers）; if（math.round（numbers）== 100）{//$('.number').hide(）; date_end = getnowformatdate（）; var loading_time = date_natid-date_start $（ '。シェード'）。hide（）; var taghtml = ""; for（var i = 1; i <= 41; i ++）{if（i == 1）{taghtml + = '<div id = "first" style = "background：url（image/00' +（i <10？ '0' + i：i） + '。ノーリピート;バックグラウンドサイズ：100％ "> </div> ';} else if（i == 41）{taghtml + =' <div id =" end "style =" background：url（image/00 ' +（i <10？' 0 ' + i：i） +' .jpg）センタートップノーレピート; style = "background：url（image/00 ' +（i <10？' 0 ' + i：i） +' .jpg）Center Top No-Repeat; background-size：100％"> </div> ';}} $（ "。flipbook"）。付録（taghtml）; var w = $（ "。グラフ"）。width（）; $（ "。flipbook-viewport"） = $（window）.width（）; h = $（window）.height（）; $（ '。flipboox'）。 flipbookautocenter：true、when：{function（e、page、view）{if（page ==）{$（ "。btnimg"）。css（ "display"、 "none"）; $（ "。マーク"）。 "block"）; $（ "。マーク"）。css（ "display"、 "none"）;} if（page == 41）{$（ "。nextpage"）。 $（ "。flipbook"）。ターン（ "ページ"）; //ページの総数if（page == 1）{$（ "。return"）。css（ "display"、 "none"）; $（ "。btnimg"）。 "block"）; $（ "。btnimg"） Modernizr.csstransforms、yep：['js/turn.js']、complete：loadapp}）;};} 9）{月= "0" +月;} if（strdate> = 0 && strdate <= 9）{strdate = "0" + strdate;} var currentdate = date.get.fulterear（） + seperator + month + seperator + strdate + "" + date.gethours（） + seperator2 + date.getmintation（） + seperator2 + currentDate;}4。最終結果
Wulin Netizensは、すべての人に注意を払うように思い出させます。写真はインターネットからさりげなくダウンロードされているため、写真のサイズは標準化されていません。これは、携帯電話で閲覧するときにそれほど完全ではない写真につながります（コード作成の問題のためではありません）!!!実際のプロジェクトの写真は、コードパッケージに追加されていません。最良の効果を確認する必要がある場合は、画像サイズのデザインは750*1217であることをお勧めします。私の時間とエネルギーが限られているため、デモで書いた写真は、750*1217のサイズに1つずつ写真を変更しませんでした。
5。コードパッケージとダウンロード
http://xiazai.vevb.com/201605/yuanma/turn.jsは、本の回転効果（vevb.com）.rarを達成するために