เมื่อเร็ว ๆ นี้ผู้จัดการโครงการได้ฝึกฝนโครงการของฉัน ข้อกำหนดของโครงการคือการบรรลุผลของการพลิกหนังสือ หลังจากเห็นข้อกำหนดนี้ฉันสับสนจริงๆ เกิดอะไรขึ้น ฉันเกิดที่ชวา ปัญหานี้ทำให้ฉันนิ่งงันจริงๆ ต่อมาฉันมีคำแนะนำของเพื่อนร่วมงาน เขาเคยทำ PC เวอร์ชั่น Flipping Books มาก่อน เขาใช้ 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-compatible" content = "ie = edge, chrome ="/> <meta name = "viewport" content = "width width 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> style = "display: none;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display: none;"> <div> </div> </div> </div> </div> style = "display: none;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "แสดง: ไม่มี; ไม่มี "/> <div> <div> </div> </div> </div> <script> // เลเยอร์การเลียนแบบ iPhone ที่กำหนดเอง (ฟังก์ชั่น ($) {// iOS ยืนยัน boxjQuery.fn.confirm = ฟังก์ชั่น (ชื่อตัวเลือก, okcall, cancelCall) // text ok btn}; if (undefined === ตัวเลือก) {opption = {};} if ('function'! = typeof okcall) {okcall = $ .noop;} if ('function'! = typeof cancelCall) CancelCall: CancelCall}); var $ dom = $ (this); var dom = $ ('<div>'); var dom = $ ('<div>'). ภาคผนวก (dom); var dom_content = $ ('<div>') html (o.title). btn_cancel = $ ('<a href = "#"> </a>') .html (o.canceltext) .appendto (dom_btn); var btn_ok = $ ('<a href = "#"> </a>') .html (o.oktext) {o.cancelcall (); dom.remove (); e.preventdefault ();}); btn_ok.on ('คลิก', ฟังก์ชั่น (e) {o.okcall (); dom.remove (); e.preventdefault ();};}; หน้า $ (". PreviousPage"). bind ("touchend", function () {var pagecount = $ (". flipbook"). turn ("หน้า"); // จำนวนทั้งหมดของหน้า var currentPage = $ (". flipbook") turn ("หน้า"); {}}); // หน้าถัดไป $ (". NextPage"). bind ("touchend", function () {var pagecount = $ (". flipbook"). turn ("หน้า"); // จำนวนทั้งหมดของหน้า var currentPage = $ ("flipbook") {$ (". flipbook"). turn ('page', currentPage + 1);} else {}}); // กลับไปที่หน้าไดเรกทอรี $ (". return"). ผูก ("touchend", ฟังก์ชัน () {$ (เอกสาร). // จำนวนหน้ากระโดด}, function () {});}); </script> </body> </html>3. ชิ้นส่วนการใช้งาน JS หลัก
// ตัดสินประเภทของหน้าต่างโทรศัพท์มือถือ onload = function () {//alert($(window).Height()); โทรศัพท์ // ป้องกันความยืดหยุ่นบนและล่างของ iOS.on ('scroll.elasticity', ฟังก์ชั่น (e) {e.preventdefault ();}). on ('touchmove.lasticity', ฟังก์ชั่น (e) {e.preventdefault ();}); การโหลด ();} var date_start; var date_end; date_start = getNowFormatDate (); // การโหลดภาพ var loading_img_url = ["./image/0001.jpg",","."./Image/0002.jpg","."."./Image/0003.jpg","phpg"phpg","phpg","phpg","phpg"phpg", 0006.jpg "," ./ image/0007.jpg ",",./image/0008.jpg "," ./ image/0009.jpg "," ./ image/0010.jpg ","./image/0010.jpg " /0011.jpg",","./Image/0012.jpg",","./Image/0013.jpg",","."."."."."."."."."."."."."."."."."."."."."."." /0016.jpg","./Image/0017.jpg",",/Image/0018.jpg","."."."."./Image/0019.jpg","."./Image/0020.jpg"phr ",", "./ image/0022.jpg", "," ./ image/0023.jpg ",", "./ image/0024.jpg", "," ./ image/0025.jpg ",", "image/0026.jpg", " e/0027.jpg ",",./image/0028.jpg "," ./ image/0029.jpg "," ./ image/0030.jpg "," ./ image/0031.jpg "," image/0031.jpg " 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 " การโหลดฟังก์ชั่นหน้า () {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 = ฟังก์ชั่น () 100; $ ('. number'). html (parseint (ตัวเลข) + "%"); console.log (ตัวเลข); ถ้า (math.round (ตัวเลข) == 100) {//$('.number') $ ('. Shade'). ซ่อน (); var taghtml = ""; สำหรับ (var i = 1; i <= 41; i ++) {ถ้า (i == 1) {taghtml + = '<div id = "แรก" สไตล์ = "url (image/00' + (i <10? ไม่ต้องทำซ้ำขนาดพื้นหลัง: 100%"> </div> ';} อื่นถ้า (i == 41) {taghtml + =' <div id =" end "style =" พื้นหลัง: url (image/00 ' + (i <10?' 0 ' + i: i) +' .jpg) style = "พื้นหลัง: url (image/00 ' + (i <10?' 0 ' + i: i) +' .jpg) ศูนย์กลางที่ไม่ต้องทำซ้ำขนาดพื้นหลัง: 100%"> </div> ';}} $ (". flipbook") $ (". graph"). width (); $ (". flipbook-viewport"). show ();}); // กำหนดค่า turn.jsfunction loadapp () {var w = $ (หน้าต่าง) .width (); var h = $ (window) {w = $ (หน้าต่าง) .width (); h = $ (หน้าต่าง) .height (); $ ('. flipboox'). ความกว้าง (w) .height (h);}); $ ('. flipbook'). turn (// // widthwidth: w Auto Center นี้ flipbookautocenter: จริง, เมื่อ: {turning: function (e, หน้า, ดู) {ถ้า (หน้า ==) {$ (". btnimg"). css ("แสดง", "ไม่มี"); $ (". mark"). css ("แสดง", "บล็อก"); "block"); $ (". mark"). css ("แสดง", "ไม่มี");} ถ้า (หน้า == 41) {$ (". nextPage"). css ("แสดง", "ไม่มี"); $ (". flipbook"). Turn ("หน้า"); // จำนวนหน้าทั้งหมดถ้า (หน้า == 1) {$ (". return"). css ("แสดง", "ไม่มี"); $ (". btnimg"). css ("แสดง", "ไม่มี"); "block"); $ (". btnimg"). css ("แสดง", "block");} ถ้า (หน้า == 2) {$ ("แคตตาล็อก"). css ("แสดง", "block"); "ไม่มี");}}}})} yepnope ({test: modernizr.csstransforms, yep: ['js/turn.js'], เสร็จสมบูรณ์: loadapp});};}}} ฟังก์ชั่น getNowformatdate () +; var strdate = date.getDate (); ถ้า (เดือน> = 1 && เดือน <= 9) {เดือน = "0" + เดือน;} ถ้า (strdate> = 0 && strdate <= 9) {strdate = "0" + strdate;} var currentDate = วันที่ seperator2 + date.getMinutes () + seperator2 + date.getSeconds (); return currentDate;}4. ผลลัพธ์สุดท้าย
Wulin Netizens เตือนให้ทุกคนให้ความสนใจ: รูปภาพจะถูกดาวน์โหลดอย่างไม่เป็นทางการจากอินเทอร์เน็ตดังนั้นขนาดของรูปภาพจึงไม่ได้มาตรฐานซึ่งนำไปสู่ภาพที่ไม่สมบูรณ์เมื่อเรียกดูโทรศัพท์ของคุณ [ไม่ใช่เพราะปัญหาเกี่ยวกับการเขียนโค้ด] !!! รูปภาพในโครงการจริงจะไม่ถูกเพิ่มลงในบรรจุภัณฑ์รหัส หากคุณต้องการเห็นเอฟเฟกต์ที่ดีที่สุดขอแนะนำว่าการออกแบบขนาดภาพคือ: 750*1217 เนื่องจากเวลาและพลังงานที่ จำกัด ของฉันรูปภาพที่ฉันเขียนในการสาธิตไม่ได้เปลี่ยนรูปภาพทีละเป็นขนาด 750*1217
5. บรรจุภัณฑ์และดาวน์โหลดรหัส
http://xiazai.vevb.com/201605/yuanma/turn.js เพื่อให้ได้ผลการเดินทางของหนังสือ (vevb.com) .rar