최근 프로젝트 관리자는 프로젝트를 연습했습니다. 프로젝트 요구 사항은 책을 뒤집는 효과를 달성하는 것이 었습니다. 이 요구 사항을 본 후, 나는 정말로 혼란 스러웠다. 무슨 일이에요? 나는 자바에서 태어났다. 이 문제는 정말로 나를 괴롭 혔습니다. 나중에, 나는 동료의지도를 받았다. 그는 전에 책을 뒤집는 책을 한 번 해냈습니다. 그는 당시 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> <script type = "text/javascript"src = "js/modernizr.5.5.3.min.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-catsible"content = "ie get, chrome ="/> <meta name = "viewport"content = "width = device-width, mater-scale =. "Teleply = no"> <meta name = "Apple-Mobile-web-app-capable"content = "yes"/> <meta name = "Apple-Mobile-Web-App-status-bar 스타일"content = "black"/<title> turn.js는 뒤집는 책의 효과 </title> <link rel = "Styleshet"type = "text/css" href = "css/basic.css"/> <script type = "text/javaScript"src = "js/jquery.js"> </script> <script> <script type = "text/javaScript"src = "js/modernizr.2.5.3.min.js"</script> <text/javascript " src = "js/main.js"> </script> </head> <body> <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> <img src ="./ image/btn.gif "style ="display : none; "> <div> </div> <div> </div> </div> <img src ="./ image/btn.gif " "style ="display : none; "> <div> </div> <div> </div> </div> <img src ="./ image/btn.gif "style ="display : none; "> <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 boxjQuery.fn.confirm = function (title, option, okCall, cancelCall) {var defaults = {title: null, //what textcancelText: 'Cancel', //the cancel btn textokText: 'Confirm' // ok btn text}; if (undefined === 옵션) {옵션 = {};} if ( 'function'! = typeof okcall) {okcall = $ .noop;} if ( 'function'! = typeof cancelCall) {canceCall = $ .noop;} var o = $ .EXtend (defaults, 옵션, 옵션 : 옵션 : 옵션 : 옵션 : 옵션 : 옵션 : 옵션 : CANCELCALL}); var $ dom = $ (this); var dom = $ ( '<div>'); var dom = $ ( '<div>'). AppendTo (dom); var dom_content = $ ( '<div>'). html (o.title) .appendto (dom); var dom_btn = $ ( '<div>'). dom); dom); $ ( '<a href = "#"> </a>') .html (O.CancelText) .appendto (dom_btn); var btn_ok = $ ( '<a href = "#"> </a>') {O.CancelCall (); dom.remove (); e.preventDefault ();}); btn_ok.on ( 'click', function (e) {o.okcall (); dom.remove (); e.preventDefault ();}); dom.appendto ( 'body'); page $ ( ". previouspage"). bind ( "touchend", function () {var pagecount = $ ( ". flipbook"). turn ( "pages"); // 총 페이지 수 var currentpage = $ ( ". flipbook"). turn ( "page"); // 현재 페이지 (currentpage> = 2) {$ (flipbook); {}}); // 다음 페이지 $ ( ". NextPage"). bind ( "touchend", function () {var pagecount = $ ( ". flipbook"). Turn ( "pages"); // 총 페이지 var currentPage = $ ( ". flipbook"); // current page <= pagecount) {flipbook "). currentPage + 1);} else {}}); // 디렉토리로 돌아 가기 페이지 $ ( ". return"). bind ( "touchend", function () {$ (document) .confirm ( '홈페이지로 돌아 가기를 원합니까?' {});}); </script> </body> </html>3. 메인 JS 구현 부분
// 휴대 전화 창의 유형을 판단합니다. 전화 // ios.on ( 'scroll.elasticity', function (e) {e.preventDefault ()). on ( 't loading ();} var date_start; var date_end; date_start = getNowFormatDate (); // 이미지로드 var loading_img_url = [ "./image/0001.jpg","./image/0002.jpg" 0006.jpg ","./ image/0007.jpg ",",./image/0008.jpg ","./ image/0009.jpg ","./ image/0010.jpg ","./ image/0010.jpg ","./ image/ /0011.jpg","./image/0012.jpg" /0016.jpg","./image/0017.jpg" "." e/0027.jpg ",",./image/0028.jpg ","./ image/0029.jpg ","./ image/0030.jpg ","./ image/0031.jpg ","./ image/0031.jpg ",./image e/0032.jpg ",", ",",./image/0033.jpg ",", "./ image/0034.jpg", ","./ image/0035.jpg ","./ image/0036.jpg ",", ". 이미지/0037.jpg ",",./image/0038.jpg ",",./image/0039.jpg ","./ image/0040.jpg ","./ image/0041.jpg ",]; // load 페이지 함수 loading () {var numbers = 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 () {numbers += (1 / length) *} img. 100; $ ( '. number'). html (parseint (numbers) + "%"); console.log (숫자); if (math.round (숫자) == 100) {//$('.number').hide();date_end = getnowformatdate (); var loading_time = datate_end -datate_end {// preload image $ (functionbar). $ ( '. 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) + '. no-Repeat; 배경 크기 : 100%"> </div> ';} else if (i == 41) {taghtml + ='<div id ="end "style ="backgring : url (im <div style = "배경 : URL (im $ ( ". Graph"). width (); $ ( ". flipbook-viewport"). show ();}); // turn.jsfunction loadapp () {var w = $ (창) .width (); window) .Height (); $ ( '. flipboox') {w = $ (Wind Auto Center이 flipbookaUtocenter : true, true : {function (e, page, view) {if (page ==) {$ ( ". btnimg"). css ( "display", "none"); $ ( ". mark"). css ( "display", "block"); "block"); $ ( ". mark"). css ( "display", "none");} if (page == 41) {$ ( ". NextPage"). css ( "display", "none");} else {$ ( ". NextPage"). css ( "display", "block"), ran page, page, page, page, page); $ ( ". flipbook"). turn ( "pages"); // 총 페이지 수 (page == 1) {$ ( ". return"). css ( "display", "none"); $ ( ". btnimg"). css ( "display", "none");} else {$ ( ". return"). css ( "display"). "block"); $ ( ". btnimg"). css ( "display", "block");} if (page == 2) {$ ( ". catalog"). css ( "display", "block");} else {$ ( ". catalog"). css ( "display", ");}. "none");}}}})} yepnope ({test : modernizr.csstransforms, yep : [ 'js/turn.js'], complete : loadapp};};}}}} 함수 getNowformatdate () {var date = new date (); var seperator1 = "; ; var strdate = date.getDate (); if (Month> = 1 && Month <= 9) {Month = "0" + Month;} if (strdate> = 0 && strdate = "0" + strdate;} var currentdate = date.getlyear () + seperator + seperator + seperator + strdate + " + date. 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를 달성합니다