في الآونة الأخيرة ، مارس مدير المشروع مشروعي. كانت متطلبات المشروع لتحقيق تأثير الكتب التقليدية. بعد رؤية هذا المطلب ، كنت في حيرة من أمري. ماذا حدث؟ لقد ولدت في جافا. هذه المشكلة سخرت مني حقا. في وقت لاحق ، تلقيت إرشادات زميل. لقد قام بإصدار الكمبيوتر من الكتب التقليدية من قبل. لقد استخدم 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 = "x-ua-confern content =" ie = edge ، chrome = "/> <meta name =" viewport "content =" width = width device =. content = "telephone = no"> <meta name = "Apple-Mobile-Web-App-Cupared" content = "yes"/> <meta name = "Apple-mobile-web-app-status-bar-style" content = "black"/> <title> turn.js يحقق تأثير الكتب الإزهار </title> <link rel = "styleseed years =" textled/css " 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> </viv> <img src = ". style = "display: none ؛"> <viv> </viv> <viv> </viv> </viv> <img src = "./ image/btn.gif" style = "display: none ؛ style = "display: none ؛"> <viv> </viv> <viv> </viv> </viv> <img src = "./ image/btn.gif" style = "display: none ؛ لا شيء "/> <viv> <viv> </viv> </viv> </viv> <script> // مخصص طبقة iPhone المنبثقة iPhone (function ($) {// iOS ، . CancelCall}) ؛ var $ dom = $ (this) ؛ var dom = $ ('<viv>) ؛ var dom = $ (' <viv> '). appendto (dom) ؛ var dom_content = $ (' <viv> '). $ ('<a href = "#"> </a>') .html (o.canceltext) .appendto (dom_btn) ؛ var btn_ok = $ ('<a href = "#"> </a>') .html (o.oktext) .appendto (dom_btn) ؛ {o.cancelCall () ؛ dom.remove () ؛ الصفحة $ (". prectpage"). bind ("touchend" ، function () {var pagecount = $ (". flipbook"). Turn ("pages") ؛ // إجمالي عدد الصفحات var currentpage = $ (". flipbook"). {}}) ؛ // الصفحة التالية $ (". nextpage"). bind ("touchend" ، function () {var pagecount = $ (". flipbook"). {$ (". flipbook"). Turn ('page' ، currentpage + 1) ؛} else {}}) ؛ // return to directory page $ (". return"). bind ( // عدد صفحات القفز} ، الدالة () {}) ؛}) ؛ </script> </body> </html>3. أجزاء تنفيذ JS الرئيسية
// الحكم على نوع نافذة الهاتف المحمول. انخفاض مرونة iOS.ON ('scroll.elasticity' ، الوظيفة (e) {e.preventDefault () ؛}). على ('touchmove.eltasticity' ، function (e) {E.PreventDefault () ؛}) ؛ date_start ؛ var date_end ؛ date_start = getNowFormAtdate () ؛ // تحميل صورة var loading_img_url = [". 0006.jpg "،" ./ image/0007.jpg "،" ،./image/0008.jpg "،". /0011.jpg"،" ،" /0016.jpg"،"./image/0017.jpg"،" ، "،" ، "./ Image/0022.jpg" ، "،" E/0027.jpg "،" ،./Image/0028.jpg "،" ./ Image/0029.jpg "،" ./ Image/0030.jpg "،" ./ Image/0031.jpg "،" E/0032.jpg "،" ، "،./Image/0033.jpg" ، "،". Image/0037.jpg "،" ،./Image/0038.jpg "،" ،./Image/0039.jpg "،" ./ Image/0040.jpg "،" ./ Image/0041.jpg "،] ؛ // load صفحة الصفحة تحميل () {var number = 0 ؛ var length = loading_img_url.length for (var i = 0 ؛ i <length ؛ i ++) {var img = new image () ؛ img.src = loading_img_url [i] ؛ img.onerror = function () {mustics += mength) * 100 ؛} 100 ؛ $ ('. number'). html (parseint (number) + "٪") ؛ console.log (number) ؛ if (math.Round (number) == 100) {//$('.number') $ ('. shade'). hide () ؛ var taghtml = "" ؛ for (var i = 1 ؛ i <= 41 ؛ i ++) {if (i == 1) {tagHtml + = '<div id = "first" style = "background: url (url/00' + (i 10؟ '0' + i: i). لا تكرار ؛ حجم الخلفية: 100 ٪ "> </viv> '؛} آخر إذا (i == 41) {tagHtml + =' <div id =" end "style =" background: url (image/00 ' + (i <10؟ style = "background: url (Image/00 ' + (i <10؟' 0 ' + i: i) +' .jpg) Center Top No-repeat ؛ $ (". الرسم البياني"). width () ؛ $ (". flipbook-viewport"). show () ؛}) ؛ // تكوين turn.jsfunction loadapp () {var w = $ (window) .width () ؛ var h = $ (window) .hight () ؛ $ ('. $ (window) .width () ؛ h = $ (window). height () ؛ $ ('. flipboox'). العرض (w). height (h) ؛}) ؛ $ ('. flipbook'). flipbookautocenter: true ، متى: {turner: function (e ، page ، view) {if (page ==) {$ (". btnimg"). css ("display" ، "none") ؛ $ (". mark"). "block") ؛ $ (". mark"). css ("display" ، "none") ؛} if (page == 41) {$ (". nextpage"). css ("display" ، "none") ؛ $ (". flipbook"). بدوره ("الصفحات") ؛ // إجمالي عدد الصفحات إذا (page == 1) {$ (". return"). css ("display" ، "none") ؛ $ (. "block") ؛ $ (". btnimg"). "لا شيء") ؛}}}})} yepnope ({test: modernizr.csstransforms ، yep: ['js/turn.js'] ، كاملة: loadapp}) ؛ ؛ var strDate = date.getDate () ؛ if (month> = 1 && month <= 9) {month = "0" date.getMinutes () + seperator2 + date.getSeconds () ؛ return CurrentDate ؛}4. النتيجة النهائية
يذكر Wulin tetizens الجميع بالانتباه إلى: يتم تنزيل الصور عرضًا من الإنترنت ، وبالتالي فإن حجم الصور غير موحد ، مما يؤدي إلى عدم اكتمال الصور عند التصفح على هاتفك [ليس بسبب المشكلة في كتابة الكود] !!! لا تتم إضافة الصور في المشروع الحقيقي إلى عبوة الكود. إذا كنت بحاجة إلى رؤية أفضل تأثير ، فمن المستحسن أن يكون تصميم حجم الصورة هو: 750*1217. نظرًا لوقتي المحدود والطاقة ، فإن الصور التي كتبتها في العرض التوضيحي لم تغير الصور واحدة تلو الأخرى بحجم 750*1217.
5. عبوات الرمز والتنزيل
http://xiazai.vevb.com/201605/yuanma/turn.js لتحقيق تأثير الكتب (vevb.com) .rar