في الآونة الأخيرة ، كلفني CTO مهمة لتطوير H5 للهاتف المحمول. الوظيفة الرئيسية هي تحقيق آثار تحول الكتب. بعد أن سمعت عن الاحتياجات الرئيسية ، كان هذا صحيحًا في ذلك الوقت! ! ! بعد ذلك ، حاولت استخدام FullPage.js و Swiper لتحقيق تأثير تحول الكتب ، لكن النتائج لم تكن مثالية للغاية. في وقت لاحق ، تذكرت أنني قد فعلت إصدار الكمبيوتر الشخصي من تأثير تحول الكتاب. في ذلك الوقت ، استخدمت Turn.js. بعد التحقق من واجهة برمجة التطبيقات ذات الصلة ، أدركت فجأة أن استخدام 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 type = "text/javaScript" src = "js/main.js"> </script>
2. جزء من رمز HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "content content =" ie = edge ، chrome = 1 "/> meta = name = "تنسيق-detection" content = "telephone = no"> <meta name = "Apple-mobile-web-app-app-content =" yes "/> <meta name =" Apple-mobile-web-app-app-status-bar-style "content =" black "/> <title> turn.js يحقق تأثير الحجز </link reil> leaved =" styles = " href = "css/basic.css"/> <script type = "text/javaScript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/movelizr.2.5.3.min.js src = "js/main.js"> </script> </head> <body> <viv> <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </viv> </viv> </viv> </div> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </div> </div> <img src = "./ image/btn.gif" style = "display: none"/> <viv> <viv> </viv> </viv> </viv> <script> OKCALL ، CANCELCALL) {var defults = {title: chanclcall) {cancelcall = $.} var o = $ $ (<viv> '). html (O.Title). href = "#" </a> ') .html (o.oktext) .appendto (dom_btn) ؛ Dom.Remove () ؛ // الصفحة السابقة $ (". prectpage"). bind ("touchend" ، function () {var pagecount = $ (". flipbook"). Turn ("pages") ؛ // إجمالي عدد الصفحات var currentpage = $ (". flipbook"). } آخر { } })؛ //nextpage").bind("Touchend "، function () {var pagecount = $ (". flipbook "). Turn (" pages ") ؛ // إجمالي عدد الصفحات var currentpage = $ (". flipbook "). } آخر {}}) }) ؛ </script> </body> </html>3. أجزاء تنفيذ JS الرئيسية
/*** تم إنشاؤه بواسطة Chengya في 2016/6/18. */// judge window type phone type.onload = function () {// alert ($ (window) .height ()) ؛ var u = navigator.useragent ؛ if (U.Indexof ('Android')> -1 || u.Indexof ('Linux')> -1) {// Android Phone} آخر إذا (U.Indexof ('iPhone')> -1) {// Apple Phone // recield the apprevantive the upreventdisty () ؛ }). on ('touchmove.elasticity' ، function (e) {e.PreventDefault () ؛}) ؛ } آخر إذا (U.Indexof ('Windows Phone')> -1) {// winphone phone} // preloading loading () ؛} var date_start ؛ var date_end ؛ date_start = getNowFormatdate () "./image/0003.jpg" ، "./image/0004.jpg" ، "./image/0005.jpg" ، "./image/0006.jpg" ، "./image/0007.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/0026.jpg" ، "./image/0027.jpg" ، "./image/0028.jpg" ، "./image/0029 "./image/0032.jpg" ، "./image/0033.jpg" ، "./image/0034.jpg" ، "./image/0035.jpg" ،. "./image/0040.jpg" ، "./image/0041.jpg" ، page ؛ var length = loading_img_url.length ؛ لـ (var i = 0 ؛ i <length ؛ i ++) {var img = new image () ؛ img.src = loading_img_url [i] ؛ img.onerror = function () {number += (1 / length) * 100 ؛ } img.onload = function () {number += (1 / length) * 100 ؛ $ ('. number'). html (parseint (number) + "٪") ؛ console.log (الأرقام) ؛ if (Math.Round (number) == 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 += '<vil div id = "first" ysold = '.jpg) المركز العلوي لا تكرار ؛ حجم الخلفية: 100 ٪ "> </viv>' ؛} آخر إذا (i == 41) {taghtml + = '<div id =" end "style =" background: url (image/00' + (i <10؟ ' + i: i: i) TAGHTML + = '<Div Style = "url (Image/00' + (i <10؟ '0' + i: $ (". flipbook-viewport"). show () ؛ // تكوين turn.js وظيفة loadapp () {var w = $ (window) .width () ؛ var h = $ (window) .height () ؛ $ ('. flipbook'). العرض (w) .hight (h) ؛ $ (window) .resize (function () {w = $ (window) .width () ؛ h = $ (window) .Height () ؛ $ ('. flipbook'). (E ، عرض) {if (page == 1) {$ (". btnimg" (Page == 41) {$ (". == 1) {$ (". $ ( getNowFormatdate () {var date =) ؛ strdate ؛4. النتيجة النهائية
ملاحظة: يتم تنزيل الصور عرضًا من الإنترنت ، وبالتالي فإن حجم الصور غير موحد ، مما يجعل الصور غير كاملة عند التصفح على الهاتف [ليس بسبب مشكلة كتابة الكود] !!! لا تتم إضافة الصور في المشروع الحقيقي إلى عبوة الكود. إذا كنت بحاجة إلى رؤية أفضل تأثير ، فمن المستحسن أن يتم تصميم حجم الصورة على النحو التالي: 750*1217. نظرًا لوقتي المحدود والطاقة ، فإن الصور التي كتبتها في العرض التوضيحي لم تغير الصور واحدة تلو الأخرى بحجم 750*1217.
رمز المصدر تنزيل:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.