최근 CTO는 모바일 H5 개발 작업을 할당했습니다. 주요 기능은 서적 전환 효과를 달성하는 것입니다. 주요 요구에 대해 들었을 때, 그 당시에는 사실이었습니다! ! ! 다음으로 FullPage.js와 스 와이퍼를 사용하여 책 전환 효과를 달성하려고했지만 결과는 그다지 이상적이지 않았습니다. 나중에, 나는 책을 돌리는 효과의 PC 버전을 수행했다는 것을 기억했다. 그 당시 나는 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, hrome = 1"/> <meta name = "viewport"contment = "width = device-width, 초기-스케일 = 1.0, user-scally = no"/> "/>. 이름 = "형식-검출"내용 = "전화 = no"> <meta name = "Apple-Mobile-web-app-capable"content = "yes"/<meta name = "apple-mobile-web-app-status-bar 스타일"내용 = "title> turn.js는 책을 전환하는 효과 </css" "typs" "텍스트/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> </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> <custion imitation iPhon 팝업 레이어 (function ($) {title jupery.firm =, : var defaults = {null, // what aventext : // cance '// ok btn text} {옵션 = {function'; CANCELCALL = $ .NOOP; $ ( '<div>' href = "#"> </a> ') .html (o.oktext) .appendto (dom_btn); dom.remove (); // previous page $ ( ". previousPage"). bind ( "touchend", function () {var pagecount = $ ( ". flipbook"). Turn ( "pages"); // 총 페이지 var currentpage = $ ( ". flipbook"). {}}); //nextpage").bind("touchend ", function () {var pagecount = $ (". flipbook "). turn ("pages "); // 총 페이지 수 var currentpage = $ (". flipbook "). turn ("page "); // currentpage <= pagecount) {$ page} ( '. }}); // 디렉토리로 돌아 가기 페이지 $ ( ". return"). bind ( "touchend", function () {$ (document) .confirm ( '홈페이지로 돌아 가고 싶습니까?', {}, function () {flipbook "). }); </script> </body> </html>3. 메인 JS 구현 부분
/*** Chengya가 2016/6/18에 만들었습니다. */// 휴대 전화 유형 창 판단 창. var u = navigator.useragent; if (u.indexof ( 'android')> -1 || u.indexof ( 'linux')> -1) {// android phone} else if (u.indexof ( 'iPhone')> -1) {// Apple Phone // iOS.on의 상단 및 하부 탄력성 ( 'scroll.elasticity', function (E.PreventDefault (E.PreventDefault) {E.PreventDefault (E.PreventDefault (E.PreventDefault); }). } else if (u.indexof ( 'wind "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg", "./image/0008.jpg", "./image/0009.jpg" "./image/0011.jpg", "./image/0012.jpg", "./image/0013.jpg", "./image/0014.jpg", "./image/0015.jpg", "./image/0016.jpg", "./image/0017.jpg" "./image/0019.jpg", "./image/0019.jpg", "./image/0020.jpg", "./image/0021.jpg", "./image/0022.jpg", "./image/0023.jpg", "./image/0024.jpg" "./image/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", "./image/0029.jpg", "./image/0030.jpg", "./image/0031.jpg", "./image/0032.jpg", " "./image/0032.jpg", "./image/0033.jpg", "./image/0034.jpg", "./image/0035.jpg", "./image/0036.jpg", "./image/0037.jpg", "./image/0038.jpg" "./image/0040.jpg", "./image/0041.jpg",] ;//loading page function loading () {var numbers = 0; var 길이 = loading_img_url.length; for (var i = 0; i <길이; i ++) {var img = new Image (); img.src = loading_img_url [i]; img.onerror = function () {숫자 += (1 / length) * 100; } img.onload = function () {숫자 += (1 / length) * 100; $ ( '. number'). html (parseint (숫자) + "%"); Console.log (숫자); if (math.round (numbers) == 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 += '<div id = "first"style = "background : url' +(<10 +i) + '.jpg) 중심 상단 No-Repeat; 배경 크기 : 100%"> </div>';} else if (i == 41) {taghtml + = '<div id ="end "style ="background : url (Image/00' + (i <10? '0' + i : i) + '.jpg) 중앙 상단 없음; taghtml + = '<div style = "배경 : URL (Image/00' + (i <10? '0' + i : i) + '.jpg). $ ( ". flipbook-viewport"). show (); // turn.js function loadapp () {var w = $ (window) .width (); var h = $ (창) .height (); $ ( '. flipbook'). 너비 (w) .Height (H); $ (wind 함수 (page = 1) {$ ( ". btnimg"). CSS ( ". Mark"). if (page == 41) {$ ( ". NextPage"). CSS ( "none") { ". NextPage"). 1) { ". return") ( "디스플레이"); "." $ ( ". catalog", "block") { ". 카탈로그") getNowFormatDate () {var date () "; strdate; var currentdate = date.getsyear () + seperator1 + month + seperator1 + "" + date.gethours () + seperator2 + date.getMinutes () + seperator2 + date.getSeconds ();4. 최종 결과
참고 : 사진은 인터넷에서 자연스럽게 다운로드되므로 그림의 크기가 표준화되지 않으므로 전화를 탐색 할 때 그림이 매우 완료되지 않습니다. [코드 쓰기의 문제 때문이 아닙니다] !!! 실제 프로젝트의 사진은 코드 포장에 추가되지 않습니다. 최상의 효과를 볼 필요가있는 경우 그림의 크기가 다음과 같이 설계되는 것이 좋습니다. 750*1217. 제한된 시간과 에너지로 인해 데모에 쓴 사진은 그림을 하나씩 750*1217 크기로 바꾸지 않았습니다.
소스 코드 다운로드 : http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(Vevb.com).rar
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.