เมื่อเร็ว ๆ นี้ CTO มอบหมายงานให้ฉันสำหรับการพัฒนา H5 มือถือ ฟังก์ชั่นหลักคือการบรรลุเอฟเฟกต์การกลับหนังสือ หลังจากที่ฉันได้ยินถึงความต้องการหลักมันเป็นเรื่องจริงในเวลานั้น! - - ต่อไปฉันพยายามใช้ fullpage.js และ swiper เพื่อให้ได้เอฟเฟกต์การกลับหนังสือ แต่ผลลัพธ์ไม่เหมาะมาก ต่อมาฉันจำได้ว่าฉันได้ทำเอฟเฟกต์การย้อนกลับของหนังสือพีซีแล้ว ในเวลานั้นฉันใช้ Turn.js หลังจากตรวจสอบ API ที่เกี่ยวข้องฉันก็รู้ทันทีว่าการใช้ Turn.js สามารถแก้ปัญหาความต้องการปัจจุบันทั้งหมดของฉันได้อย่างสมบูรณ์สำหรับการยึดครองโครงการนี้ ตอนนี้ฉันจะสรุปการเรียนรู้ส่วนตัวของฉันดังนี้ หากมีความไม่ถูกต้องผู้อ่านสามารถวิพากษ์วิจารณ์และแก้ไขฉันได้!
เว็บไซต์อย่างเป็นทางการของ 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"> </script> type = "text/javascript" src = "js/main.js"> </script>
2. ส่วนหนึ่งของรหัส HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge, chrome = 1"/> content = "โทรศัพท์ = no"> <meta name = "Apple-Mobile-Web-App-App-App-Capable" Content = "ใช่"/> <meta name = "Apple-Mobile-Web-app-status-bar-bar-style" content = "black"/> <title> turn.js href = "css/basic.css"/> <script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/modernizr.2.5.min.js" 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> <img src = "./ image/btn.gif" style = "จอแสดงผล: ไม่มี"/> <div> <div> </div> OKCALL, CANCELCALL) {var defaults = {title: null, // ข้อความที่ยกเลิก: 'Cancel', // การยกเลิก BTN Text Oktext cancelcall) {cancelcall = $ .noop; $ ('<div>'). html (o.title) .appendto (dom1); href = "#"> </a> ') .html (o.oktext) .appendto (dom_btn); Dom.Remove (); // หน้าก่อนหน้า $ (". PreviousPage"). bind ("touchend", function () {var pagecount = $ (". flipbook") turn ("หน้า"); // จำนวนทั้งหมดของหน้า var currentPage = $ ("flipbook") } อื่น { } }); //nextpage").bind("touchend ", function () {var pagecount = $ (". flipbook "). turn (" หน้า "); // จำนวนทั้งหมดของหน้า var currentPage = $ (". flipbook "). turn (" หน้า "); // หน้าปัจจุบัน } else {}}); // กลับไปที่ไดเรกทอรีหน้า $ (". return"). bind ("touchend", function () {$ (เอกสาร) .confirm ('คุณแน่ใจว่าคุณต้องการกลับไปที่หน้าแรก?', {}, function () {$ (" }); </script> </body> </html>3. ชิ้นส่วนการใช้งาน JS หลัก
/*** สร้างโดย Chengya เมื่อวันที่ 2016/6/18 */// Judge Window ประเภทโทรศัพท์มือถือ onload = function () {// alert ($ (window) .height ()); var u = navigator.useragent; if (U.Indexof ('Android')> -1 || u.indexof ('linux')> -1) {// โทรศัพท์ Android} อื่นถ้า (u.indexof ('iphone')> -1) {// Apple Phone // shield ความยืดหยุ่นบนและล่างของ ios.on.on ( }). on ('touchmove.lasticity', ฟังก์ชั่น (e) {e.preventdefault ();}); } else if (u.indexof ('windows phone')> -1) {// winphone phone} // การโหลดล่วงหน้า ();} var date_start; var date_end; date_start = getNowFormatDate (); // โหลดภาพ var loading_img_url = [ "./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/0016.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/0037.jpg " "./Image/0040.jpg", "./image/0041.jpg", เหมือนกัน ///loading การโหลดฟังก์ชั่นการโหลด () {var numbers = 0; var length = loading_img_url.length; สำหรับ (var i = 0; i <length; i ++) {var img = ภาพใหม่ (); img.src = loading_img_url [i]; img.onerror = function () {ตัวเลข += (1 / ความยาว) * 100; } img.onload = function () {ตัวเลข += (1 / ความยาว) * 100; $ ('. number'). html (parseint (ตัวเลข) + "%"); console.log (ตัวเลข); if (math.round (ตัวเลข) == 100) {// $ ('. number'). ซ่อน (); date_end = getNowFormatDate (); var loading_time = date_end - date_start; // preload image $ (ฟังก์ชั่น progressbar () {// ภาพแยก $ ('. Shade'). ซ่อน (); var taghtml = ""; สำหรับ (var i = 1; i <= 41; i ++) {ถ้า (i == 1) {taghtml += '<div id = '.jpg) ศูนย์กลางที่ไม่ต้องทำซ้ำขนาดพื้นหลัง: 100%"> </div>';} อื่นถ้า (i == 41) {taghtml + = '<div id =" end "style =" พื้นหลัง: url (image/00' + (i <10? '0' + i) + '.jpg) taghtml + = '<div style = "พื้นหลัง: url (image/00' + (i <10? '0' + i: i) + '.jpg) ศูนย์กลางที่ไม่ต้องทำซ้ำขนาด: 100%"> </div>'; $ (". flipbook-viewport"). show ();}); // กำหนดค่า turn.js function loadapp () {var w = $ (หน้าต่าง) .width (); var h = $ (หน้าต่าง) .Height (); $ ('. flipbook'). ความกว้าง (w) .Height (h); $ (window) .resize (function () {w = $ (หน้าต่าง) .width (); h = $ (หน้าต่าง) .height (); $ ('. flipbook'). หมุน ({// ความกว้างความกว้าง: w, // ความสูง: h, // ระดับความสูง ฟังก์ชั่น (e, ดู) {ถ้าหน้า == 1) {$ (". btnimg"). css ("แสดง", "ไม่มี"); if (page == 41) {$ (". NextPage"). CSS ("แสดง", "ไม่มี"); == 1) {$ (". return"). CSS ("แสดง", "ไม่มี"); $ (". catalog"). CSS ("แสดง", "block"); getNowFormatDate () {date = new date (); strdate;} var currentdate = date.getlyear () + seperator1 + เดือน + seperator1 + strdate + "" + date.gethours () + seperator2 + date.getMinutes () + seperator2 + วันที่4. ผลลัพธ์สุดท้าย
หมายเหตุ: รูปภาพจะถูกดาวน์โหลดอย่างไม่เป็นทางการจากอินเทอร์เน็ตดังนั้นขนาดของรูปภาพจึงไม่ได้มาตรฐานซึ่งทำให้รูปภาพไม่สมบูรณ์มากเมื่อเรียกดูโทรศัพท์ [ไม่ใช่เพราะปัญหาของการเขียนโค้ด] !!! รูปภาพในโครงการจริงจะไม่ถูกเพิ่มลงในบรรจุภัณฑ์รหัส หากคุณต้องการเห็นเอฟเฟกต์ที่ดีที่สุดขอแนะนำให้ขนาดของภาพได้รับการออกแบบเป็น: 750*1217 เนื่องจากเวลาและพลังงานที่ จำกัด ของฉันรูปภาพที่ฉันเขียนในการสาธิตไม่ได้เปลี่ยนรูปภาพทีละเป็นขนาด 750*1217
ดาวน์โหลดซอร์สโค้ด: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น