Baru -baru ini, CTO memberi saya tugas untuk pengembangan H5 seluler. Fungsi utamanya adalah untuk mencapai efek balik buku. Setelah saya mendengar kebutuhan utama, itu benar pada waktu itu! Lai Lai Selanjutnya, saya mencoba menggunakan FullPage.js dan Swiper untuk mencapai efek pembalik buku, tetapi hasilnya tidak terlalu ideal. Kemudian, saya ingat bahwa saya telah melakukan versi PC dari efek pembalik buku. Pada saat itu, saya menggunakan Turn.js. Setelah memeriksa API terkait, saya tiba -tiba menyadari bahwa menggunakan Turn.js dapat sepenuhnya menyelesaikan semua kebutuhan saya saat ini untuk mengambil alih proyek ini. Sekarang saya akan merangkum pembelajaran pribadi saya sebagai berikut. Jika ada keraguan, pembaca dipersilakan untuk mengkritik dan mengoreksi saya!
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" konten = "ie = edge, chrome = 1"/> <meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1.0, meta-meta =" viewport "=" width = device-width, initial-scale = 1.0, Userpal = noing = noe/noe/noe/no no/no no/no device, no-scal = 1.0, a-scal = 1.0, noon = noe = noe/width = device-width, scal-scal = 1.0, User = "noon" noed = "no-scal = 1.0, name = no-devat =" no-devat = scal 'scal = 1. Content = "Telepon = Tidak"> <meta name = "Apple-Mobile-Web-Appable" Content = "YA"/> <Meta name = "Apple-Mobile-Web-App-Status-Bar-style" Content = "Black"/> <Title> Turn.js mencapai efek buku/c-turning </title> <tautan rel = "styles" type = " 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"></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></div><script> //Custom imitation iphone pop-up layer(function ($) { //ios confirm box jQuery.fn.confirm = function (title, option, Okcall, BatalCall) {var defaults = {title: null, // Teks apa yang canceltext: 'batal', // Teks batal BTN OKTEXT: 'konfirmasi' // Teks BTN OK}; if (if function '; BatalCall) {Batalkancall = $ .noop; $ ('div>'). HTML (O.Title) .Appendto (DOM1); href = "#"> </a> ') .html (o.oktext) .Appendto (dom_btn); dom.remove (); // Halaman sebelumnya $ (". Prefurpage"). Bind ("Touchend", function () {var pagecount = $ (". Flipbook"). Turn ("halaman"); // Jumlah Total Halaman Var CurrentPage = $ (". 1). Turn (" Page "); // Halaman saat ini jika (CurrentPage> = 2) {2) {" halaman "). } kalau tidak { } }); //Nextpage").bind("touchend ", function () {var pagecount = $ (". Flipbook "). Turn (" halaman "); // Jumlah total halaman var currentPage = $ (". Flipbook "). (" Halaman "); // halaman saat ini (lancarpage <= pageunun) {" halaman "). //. } else {}}); // kembali ke halaman direktori $ (". return"). bind ("touchend", function () {$ (dokumen) .confirm ('Anda yakin Anda ingin kembali ke beranda?', {}, fungsi () {$ (". }); </script> </body> </html>3. Bagian Implementasi JS Utama
/*** Dibuat oleh Chengya pada 2016/6/18. */// menilai tipe ponsel window.onload = function () {// alert ($ (window) .height ()); var u = navigator.useragent; if (u.indexof ('android')> -1 || u.indexof ('linux')> -1) {// ponsel android} lain jika (u.indexof ('iPhone')> -1) {// ponsel apel // lindungi elastisitas atas dan lebih rendah dari ios.on ('scroll.elasticity', function (e) {e) {E. E) (e) {E.) (e) {E.) (e) {E.) (e) {e) {e) {E.) }). on ('touchmove.elastity', function (e) {e.preventDefault ();}); } lain jika (u.indexof ('Windows Phone')> -1) {// Winphone Phone} // preloading loading ();} var date_start; var date_end; date_start = getNowFormatDate (); // memuat gambar var loading_img_url = ["./mage/0001.jpg", ",", " "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg", "./image/0008.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", "./0023.jpg", ". "./image/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", "./image/0029.jpg", "./image/0030.jpg", ". "./image/0032.jpg", "./image/0033.jpg", "./image/0034.jpg", "./image/0035.jpg", "./image/0036.jpg", "./0037.jpg", ". "./image/0040.jpg", "./image/0041.jpg", versi; var length = loading_img_url.length; untuk (var i = 0; i <panjang; i ++) {var img = gambar baru (); img.src = loading_img_url [i]; img.onError = function () {angka += (1 / panjang) * 100; } img.onload = function () {angka += (1 / panjang) * 100; $ ('. Nomor'). html (parseInt (angka) + "%"); console.log (angka); if (math.round (angka) == 100) {// $ ('. Number'). Hide (); date_end = getNowFormatDate (); var loading_time = date_end - date_start; //Preload image $(function progressbar() { //Split image $('.shade').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) + '.jpg) TOP TOP TOP TOP; Ukuran Latar Belakang: 100%"> </div>';} lain jika (i == 41) {taghtml + = '<div id =" end "style =" latar belakang: URL (gambar/00' + (i <10? '0' + i: i) + '.Jpg) TOP TOP NO-REPEAT; LAINNYA; TAGHTML + = '<Div style = "latar belakang: url (gambar/00' + (i <10? '0' + i: i) + '.jpg) TOP TOP TOP; $ (". Flipbook-viewport"). Show (); // Konfigurasikan function turn.js loadApp () {var w = $ (window) .width (); var h = $ (window) .height (); $ ('. Flipbook'). Width (w) .Height (h); $(window).resize(function () { w = $(window).width(); h = $(window).height(); $('.flipbook').turn({ // Width width: w, // Height height: h, // Elevation elevation: 50, display: 'single', // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true, when: { turning: Function (E Page, View) {if (page == 1) {$ (". if (halaman == 41) {$ (". NextPage"). CSS ("Display", "None"); == 1) {$ (". Return"). CSS ("Display", "None"); $ ( getNowFormatDate () {var date = new date (); } var currentDate = date.getLyEar () + seperator1 + bulan + seperator1 + strdate + "" + date.getHours () + seperator2 + date.getMinutes () + seperator2 + date.getSeconds ();4. Hasil akhir
Catatan: Gambar diunduh dengan santai dari internet, sehingga ukuran gambar tidak distandarisasi, yang membuat gambar tidak terlalu lengkap saat menjelajahi telepon [itu bukan karena masalah dengan penulisan kode] !!! Gambar -gambar dalam proyek nyata tidak ditambahkan ke kemasan kode. Jika Anda perlu melihat efek terbaik, disarankan bahwa ukuran gambar dirancang sebagai: 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.
Unduh Kode Sumber: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.