最近、CTOは私にモバイルH5開発のタスクを割り当てました。主な機能は、本の回転効果を実現することです。主なニーズを聞いた後、それは当時真実でした！ ！ ！次に、fullpage.jsとスワイパーを使用して本の回転効果を実現しようとしましたが、結果はあまり理想的ではありませんでした。その後、私は本の回転効果のPCバージョンをやったことを思い出しました。その時、私はターンを使用しました。関連する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 = 1"/> <meta name = "viewport" content = "width =" width-width、初期= 1.0 content = "電話= no"> <meta name = "apple-mobile-web-app-capable" content = "yes"/> <meta name = "apple-mobile-web-app-app-app-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> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div> </div> <div> </div> <div> </div> <div> </div> <img src = "./ image/btn.gif" style = "display：none"/> <div> div> </div> </div> <スクリプト> //カスタム模倣iphine pop-up-firm（$）{// ios jupy.fn. okcall、cancelcall）{var defaults：null、// canceltext：// btn text： 'compined' // ok btn text} typeof cancelcall = $ .noop; $（ '<div>）。html（o.title） href = "＃"> </a> '）.html（o.oktext）.appendto（dom_btn）; dom.Remove（）; //前のページ$（ "。前page"） それ以外 { } }）; //nextPage").bind("touchend "、function（）{var pagecount = $（"。flipbook "）。 {}}）; //ディレクトリページに戻る$（ "。return"）。 }）; </script> </body> </html>3.メインJS実装パーツ
/*** 2016/6/18にChengyaによって作成されました。 *///携帯電話タイプwindow.onload = function（）{// alert（$（window）.height（））; var u = navigator.useragent; if（u.indexof（ 'android'）> -1 || u.indexof（ 'linux'）> -1）{// android Phone} else if（u.indexof（ 'iPhone'）> -1）{// iOS.onの上部と下の弾性をシールドします。 }）。 } else if（u.indexof（ 'windows phone'）> -1）{// winphone phone} // preloading loading（）;} var date_start; var date_end; date_start = getnowformatdate（）; //ロードイメージvar loading_img_url = ["。/image/image/0001.jpg" " 「./image/0003.jpg "、" ./image/0004.jpg "、" ./image/0005.jpg "、" ./image/0006.jpg "、" ./image/0007.jpg "、" ./image/0008.jpg "、"。/image/0009.jpg " 「./image/0011.jpg "、" ./image/0012.jpg "、" ./image/0013.jpg "、" ./image/0014.jpg "、" ./image/0015.jpg "、"。 「./image/0019.jpg "、" ./image/0019.jpg "、" ./image/0020.jpg "、" ./image/0021.jpg "、" ./image/0022.jpg "、"。 "./image/0026.jpg"、 "./image/0027.jpg"、 "./image/0028.jpg"、 "./image/0029.jpg"、 "./image/0030.jpg"、 "。/image/0031.jpg"、 "。 "./image/0032.jpg"、 "./image/0033.jpg"、 "./image/0034.jpg"、 "./image/0035.jpg"、 "./image/0036.jpg"、 "。 "./image/0040.jpg"、 " 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（）{numbers +=（1 / length） * 100; } img.onload = function（）{numbers +=（1 / length） * 100; $（ '。番号'）。html（parseint（numbers） + "％"）; console.log（numbers）; if（math.round（numbers）== 100）{// $（ '。番号'）。hide（）; date_end = getNowformatdate（）; var loading_time = date_end -date_start; // preload image $（function progressbar（）{// Image $（'。shade '）。hide（）; var taghtml = ""; for（var i = 1; i <= 41; i ++）{if（i == 1）{taghtml +=' <div = "first" style = " '.jpg）センタートップノーレピート;バックグラウンドサイズ：100％ "> </div>';} else if（i == 41）{taghtml + = '<div id =" end "style ="背景：url（image/00' +（i <10？ '0' + i：i） + '.jpg）センタートップNo-repeat; taghtml + = '<div style = "background：url（i <10？' 0 ' + i） +' .jpg）背景：100％"> </div> '} $（ "。flipbook"）。 $（ "。flipbook-viewport"）。show（）; // turn.js関数loadapp（）{var w = $（window）.width（）; var h = $（window）.height（）; $（ '。flipbook'）。width（w）.height（h）; $（window）.resize（function（）{w = $（window）.width（）; h = $（windo）.height（）; $（ '。flipbook'）。turn（{// width width：w、// height：h、// elevation height：h、// elevation elevation：50、display： 'single'、// （e、view）{page == 1）{"。btnimg"） （page == 41）{"。次のページ"）。 1）{"。return"、 "none"）。 $（ "。カタログ"）（ "。"。カタログ "） getnowformatdate {var seperator1 = ""; strdate; var currentDate.getSear（） + seperator1 + seperator1 + strdate.gethours（） + seperator2 + dateminutes（） + seperator2 + date.getseconds（）;4。最終結果
注：写真はインターネットからさりげなくダウンロードされるため、写真のサイズは標準化されていないため、電話で閲覧するときに写真がそれほど完全になりません[コード作成の問題のためではありません] !!!実際のプロジェクトの写真は、コードパッケージに追加されていません。最良の効果を確認する必要がある場合は、写真のサイズを750*1217として設計することをお勧めします。私の時間とエネルギーが限られているため、デモで書いた写真は、750*1217のサイズに1つずつ写真を変更しませんでした。
ソースコードのダウンロード：http：//xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。