標籤：
現在很流行在H5頁面滑屏的效果，特別是在瀏覽器視窗中，幾乎很多推廣的活動是使用到上下滑屏，一開始和前端的同事一起合作寫滑屏效果花費了很多的時間，而且寫出來的頁面在瀏覽器的相容上踩了很多坑，於是果斷採用了架構。
最初接觸是使用iscroll4.js的架構，畢竟它是比較成熟的，用起來會讓人覺得放心，可惜它在android2.3下滑屏效果相容性不是很好，另外還有一個缺點是這個架構的有25K，為了一個滑屏的效果載入25K的代碼是不划算的~
後來找了2個比較簡單的(輕量、少bug)，這裡推薦給大家，有需要的同學不要錯過。
(有些同學會問：為什麼不使用左右滑屏呢？原因之一是在瀏覽器中，向右滑動螢幕可能導致使用者誤操退出當前頁面)
下面給2個上下滑屏的例子~
執行個體一，簡單的上下滑屏
執行個體二，簡單的上下滑屏，滑動中附加了動畫~
設計滑屏架構的辦法一般有2種
通過控制父元素的transform: translateY或margin-top或top的值來上下滑動頁面，每次的位移的取值為當前頁面高度~
這裡採用slip架構，庫大小5.75K，非常輕量，可以放心用在你的項目~
slip架構的頁面樣式需要自訂，不過這裡我簡單寫好了~
(如果你不使用架構，推薦用transform: translate(X,Y)的寫法，首先transform: translate可設計高效能動畫，其次相容android2.3+的系統，transform: translateY不相容android2.3的系統)
相容ios5+、android2.3+系統，其滑屏功能，響應靈敏~如果你只需要設計簡單的滑屏效果，可考慮它~
slip架構更多詳細的功能猛擊這裡https://github.com/binnng/slip.js
代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>slip</title><style>*{padding: 0;margin: 0;}/*架構*/.swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}.swipe{position:absolute;width:100%;}.swipe-box{width: 100%;overflow: hidden;}</style></head><body> <div class="swipe-wrap" id="slip"> <article class="swipe"> <div class="swipe-box" style=""> 第1屏 </div> <div class="swipe-box" style=""> 第2屏 </div> <div class="swipe-box" style=""> 第3屏 </div> <div class="swipe-box" style=""> 第4屏 </div> </article></div></body><script type="text/javascript" src="js/slip.min.js"></script><script type="text/javascript">var container = document.getElementById(‘slip‘);var pages = document.querySelectorAll(‘.swipe-box‘);var slip = Slip(container, ‘y‘).webapp(pages);</script></html>
下載demo
控制子容器法方法是只顯示其中一個子項目，其它隱藏，滑屏時隱藏當前元素，並顯示當前元素的下一個同輩元素~
這裡採用fullPage架構，庫大小7.69K~
fullPage架構的頁面樣式無需自訂，已有寫好的
相容ios5+、android2.3+系統，其滑屏功能，效果比較豐富，支援縮放、旋轉、透明度、自動滑屏等動畫效果~如果你需要設計精彩的滑屏效果，可考慮它~
fullPage架構更多詳細的功能猛擊這裡https://github.com/powy1993/fullpage
代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>fullPage</title><style>*{padding: 0;margin: 0;}/*架構*/body{overflow: hidden;}.page-wrap{overflow:hidden}.page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.contain{width:100%;height:100%;display:none;position:relative;z-index:0}.current .contain,.slide .contain{display:block}.current{display:block;z-index:1}.slide{display:block;z-index:2}.swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}</style></head><!--[if lte IE 7]> <body scroll="no"> <![endif]--><!--[if gt IE 7]><!--> <body> <!--<![endif]--><!-- 架構[[ --><div id="pageContain" class="page-wrap"> <div class="page page1 current" style=""> <div class="contain"> 第一屏 </div> </div> <div class="page page2" style=""> <div class="contain"> 第二屏 </div> </div> <div class="page page3" style=""> <div class="contain"> 第三屏 </div> </div> <div class="page page4" style=""> <div class="contain"> 第四屏 </div> </div></div><!-- 架構]] --></body><script type="text/javascript" src="js/fullPage.min.js"></script><script type="text/javascript">//禁止視窗的預設滑動document.ontouchmove = function(e){ e.preventDefault();}//架構var runPage, interval, autoPlay;autoPlay = function(to) { clearTimeout(interval); interval = setTimeout(function() { runPage.go(to); }, 5000);}runPage = new FullPage({ id : ‘pageContain‘, // id of contain slideTime : 800, // time of slide continuous : true, // create an infinite feel with no endpoints effect : { // slide effect transform : { translate : ‘Y‘, // ‘X‘|‘Y‘|‘XY‘|‘none‘ scale : [1, 1], // [scalefrom, scaleto] rotate : [0, 0] // [rotatefrom, rotateto] }, opacity : [0, 1] // [opacityfrom, opacityto] }, mode : ‘wheel,touch‘, // mode of fullpage easing : ‘ease‘, // easing(‘ease‘,‘ease-in‘,‘ease-in-out‘ or use cubic-bezier like [.33, 1.81, 1, 1] ) // callback : function(index, thisPage) { // index = index + 1 > 3 ? 0 : index + 1; // autoPlay(index); // }});// interval = setTimeout(function() {// runPage.go(runPage.thisPage() + 1);// }, 5000);</script></html>
下載demo
轉載自白色橡樹：http://www.cnblogs.com/PeunZhang/p/4185020.html
【轉載】移動web滑屏架構分享
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
