Baru -baru ini, manajer proyek mempraktikkan proyek saya. Persyaratan proyek adalah untuk mencapai efek membalik buku. Setelah melihat persyaratan ini, saya benar -benar bingung. Apa yang telah terjadi? Saya lahir di Jawa. Masalah ini benar -benar membuat saya bingung. Kemudian, saya memiliki bimbingan kolega. Dia telah melakukan versi PC membalik buku sebelumnya. Dia menggunakan Turn.js pada waktu itu. Setelah memeriksa API terkait, ia tiba -tiba menyadari bahwa menggunakan Turn.js dapat sepenuhnya menyelesaikan semua kebutuhan saya saat ini untuk mengambil alih proyek ini. Di bawah ini, editor akan berbagi pengalaman belajar saya dengan Anda, Anda dapat merujuknya
Situs web resmi Turn.js: http://www.turnjs.com/
Berikut adalah hasil proyek saya setelah diluncurkan:
Setelah melihat proyek yang sebenarnya, apakah Anda tidak sabar mengetahui bagaimana proyek ini diimplementasikan? Jangan khawatir, izinkan saya memperkenalkan proses pengembangan saya secara rinci:
1. File skrip yang perlu diperkenalkan
<tautan rel = "stylesheet" type = "text/css" href = "css/basic.css"/> <script type = "text/javaScript" src = "js/jQuery.js"> </script> <skrip type = "text/javas" src = "js/modernrizr =". src = "js/main.js"> </script>
2. Bagian dari kode HTML
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-kompatibel" content = "ie = edge, chrome ="/> <meta name = "viewport" content = "width = perangkat-disi-width, skala awal =. Content = "Telepon = Tidak"> <meta name = "apple-mobile-web-appable" content = "yes"/> <meta name = "Apple-Mobile-Web-App-Status-Bar-style" Content = "Black"/> <Title> Turn.js mencapai efek dari membalik buku </title> <tautan rel = "stylese =" href = "css/basic.css"/> <script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/modernizr.2.5.min.js"> </skrip> script = "JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAVCRIPS = src = "js/main.js"> </cript> </head> <body> <div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <v> </div> </Div> </Div> <img src = ". style = "Display: none;"> <div> </div> <div> </div> </div> <img src = "./ Image/btn.gif" style = "display: none;"> <div> </div> <Div> </div> </div> <img src = "./ gambar/btn.gif" style = "Display: None;"> <div> </div> <viv> </div> </div> <img src = "./ gambar/btn.gif" style = "display: none;"> <div> </div> <Div> </div> </div> <img src = ". none"/><div><div></div></div></div><script>//Custom imitation iphone pop-up layer(function ($) {//ios confirm boxjQuery.fn.confirm = function (title, option, okCall, cancelCall) {var defaults = {title: null, //what textcancelText: 'Cancel', //the cancel btn textokText: 'Confirm' //the OK BTN TEXT}; if (tidak terdefinisi === Opsi) {option = {};} if ('function'! = typeOf okcall) {okcall = $ .noop;} if ('function'! = typeOf cancelcall) {cancelcall = .noop;} var o = $. extend, default) {cancelcall = .noop;} var o = $. extend, default) {cancelcall = .noop;} var o = $. extend, default, default) {cancelcall = .noop;} var o = $. extend, default, default) {cancelcall = .noop;} var o = $. extend, default, default) BatalCall}); var $ dom = $ (this); var dom = $ ('<verv>'); var dom = $ ('<div>'). appendto (dom); var dom_content = $ ('<verv>'). html (o.title) .pendpendto (dom); var dom_btn = $ ('<= o.title) .papendto (dom); var dom_btn = $ (' div>) .pendto (dom); dom); var dom_btn = $ ('div>). $ ('<a href = "#"> </a>') .html (o.canceltext) .Appendto (dom_btn); var btn_ok = $ ('<a href = "#"> </a>') .html (o.oktext) .apendto (dom_btn); btn (o.oktext) .apendto (dom_btn); btn (o.oktext) .apendto (dom_btn); btn (o.oktext) .apendto (dom_btn); {o.cancelcall (); dom.remove (); e.preventdefault ();}); btn_ok.on ('klik', fungsi (e) {o.okcall (); dom.remove (); e.preventdefault ();}); dom.Applampto ($ ('body'); Halaman $ (".. Sebelumnyapage"). Bind ("Touchend", function () {var pagecount = $ (". Flipbook"). Turn ("halaman"); // Jumlah halaman var currentPage = $ (". 1). eve (" page "). // halaman saat ini if if (currentpage> = 2) { -2) (". {}}); // halaman berikutnya $ (". NextPage"). Bind ("Touchend", function () {var pagecount = $ (". Flipbook"). Turn ("halaman"); // Total Jumlah halaman Var CurrentPage = $ (". PAGEBOT"). TURUK ("TURUH"); // LUAR BIASA LUARTER JIKA IF BERPIKI -LUTUR LUX {$ (". Flipbook"). Turn ('Page', currentPage + 1);} else {}}); // kembali ke halaman direktori $ (". Return"). Bind ("Touchend", function () {$ (document) .confirm ('Anda yakin Anda ingin kembali ke homepage?', {{}) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (fungsi) (function) (function ". // Jumlah halaman lompat}, function () {});}); </script> </body> </html>3. Bagian Implementasi JS Utama
// menilai jenis jendela ponsel.onload = function () {//alert($(window).height());var u = navigator.useragent; if (u.indexof ('android')> -1 || u.indexof ('linux')> -1) {// telepon dan {. dan elastisitas yang lebih rendah dari ios.on ('scroll.elasticity', function (e) {e.preventDefault ();}). on ('touchmove.elasticity', function (e) {e.preventDefault ();});} lain jika (u.indexof ('windows phone')> -1) {); date_start; var date_end; date_start = getNowFormatDate (); // memuat gambar var loading_img_url = ["./image/0001.jpg" ," ,"./image/0002.jpg" ," ,"./image/0003.jpg" ," ,"."./image/0004.jpg" ," ,./image/0005.jpg" ,...image/image/ 0006.jpg "," ./ Image/0007.jpg ",",./Image/0008.jpg "," ./ Image/0009.jpg "," ./ Image/0010.jpg "," ./ Image/0010.jpg "," ./ Image/ /0011.jpg" ," ,"./image/0012.jpg" ," ,"./image/0013.jpg" ," ,"./image/0014.jpg" ,".//0015.jpg" ,...image /0016.jpg" ,"./image/0017.jpg" ," ,./image/0018.jpg" ,"./image/0019.jpg" ,"./image/0020.jpg" ,"./image/0021.jpg ",", "./ Image/0022.jpg", "," ./ Image/0023.jpg ",", "./ Image/0024.jpg", "," ./ Image/0025.jpg ",", "./ Image/0026.jpg", "./ Image e/0027.jpg "," ,./Image/0028.jpg "," ./ Image/0029.jpg "," ./ Image/0030.jpg "," ./ Image/0031.jpg "," ./ Image/0031.jpg ",/gambar e/0032.jpg ",", ",./Image/0033.jpg", "," ./ Image/0034.jpg ",", "./ Image/0035.jpg", "," ./ Image/0036.jpg ",", "," Image/0037.jpg "," ,./Image/0038.jpg ",",./Image/0039.jpg "," ./ Image/0040.jpg "," ./ Image/0041.jpg ",]; // Load Page Function Loading () {var numbers = 0; var length = loading_img_url.length for (var i = 0; i <panjang; i ++) {var img = gambar baru (); img.src = loading_img_url [i]; iMg.onError = function () {bilangan narap 100; $ ('. Number'). Html (parseInt (angka) + "%"); console.log (angka); if (math.round (angka) == 100) {//$('.number ').hide();Date_end = getNoDFormatDate (); var loading_time = date_end -date- date_end = getNoDFormatDate (); var loading_time = date_end -date- date_sting = getNoadDate (); var loading_time = date_end -date_sticrice) deturead () (function) {date_end -date_ster () () (var function_time = date_end -date_sticrice; $ ('. Shade'). Sembunyikan (); var taghtml = ""; untuk (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "style" first "latar belakang: url (gambar/00' + (i <10? '0' + i: i) + i) + ' +'. no-repeat; latar belakang-ukuran: 100%"> </div> ';} lain jika (i == 41) {taghtml + =' <div id =" end "style =" latar belakang: url (gambar/00 ' + (i <10?' 0 ' + i: i) +' .jpg) TOT TOP NO-REPEAT; latar belakang: 100%'' '' ''; style = "latar belakang: url (gambar/00 ' + (i <10?' 0 ' + i: i) +' .jpg) TOP TOP NO-REPEAT; Ukuran Latar belakang: 100%"> </div> ';}} $ (". Flipbook"). Tambahkan (taghtml); var w = $ (". Flipbook"). $ (".. Grafik"). width (); $ (". Flipbook-viewport"). show ();}); // Mengkonfigurasi turn.jsfunction loadapp () {var w = $ (window) .width (); var h = $ (window) .height (); $ ('. flipboox (). = $(window).width();h = $(window).height();$('.flipboox').width(w).height(h);});$('.flipbook').turn({// Widthwidth: w,// Heightheight: h,// Elevationelevation: ,display: 'single',// Enable gradientsgradients: true,// Auto center FlipbookAutocenter ini: true, kapan: {Turning: function (e, page, view) {if (page ==) {$ (". btnimg"). css ("display", "none"); $ (". Mark"). css ("display", "block");} lain {$ (". "blok"); $ (". Mark"). css ("display", "none");} if (page == 41) {$ (". nextpage"). css ("display", "none");} else {$ (". nextPage"). css ("display", "block"); {$): foundpage "). css (" display "," block "); {$): function (fechpage"). css ("display", "block"); {$): function (fechpage "). css (" display "," block ");}}}: {page): function, {page). $ (". Flipbook"). Turn ("halaman"); // Jumlah total halaman jika (halaman == 1) {$ (". Return"). css ("display", "none"); $ (". btnimg"). css ("display", "none");} lainnya {$ (". "blok"); $ (". btnimg"). css ("display", "block");} if (page == 2) {$ (". Catalog"). css ("display", "block");} else {$ (". "None");}}}})} yepnope ({test: modernizr.csstransforms, yep: ['js/turn.js'], Lengkap: loadApp});};}}} getNowFormatDate () {var date = new date (); var seperator1 = "; strdate = date.getDate (); if (bulan> = 1 && bulan <= 9) {bulan = "0" + bulan;} if (strdate> = 0 && strDate <= 9) {strdate = "0" + strdate;} var currentDate = date.getlyarear () + seperator + bulan + Seperator2 + 22 date.getMinutes () + seperator2 + date.getSeconds (); return currentDate;}4. Hasil akhir
Wulin Netizens mengingatkan semua orang untuk memperhatikan: gambar diunduh dengan santai dari internet, sehingga ukuran gambar tidak distandarisasi, yang mengarah pada gambar yang tidak terlalu lengkap saat menjelajahi ponsel Anda [itu bukan karena masalah dengan penulisan kode] !!! Gambar -gambar dalam proyek nyata tidak ditambahkan ke kemasan kode. Jika Anda perlu melihat efek terbaik, disarankan agar desain ukuran gambar adalah: 750*1217. Karena waktu dan energi saya yang terbatas, gambar yang saya tulis dalam demo tidak mengubah gambar satu per satu ke ukuran 750*1217.
5. Kode Kemasan dan Unduh
http://xiazai.vevb.com/201605/yuanma/turn.js untuk mencapai efek pembalikan buku (vevb.com) .rar