|
現(xiàn)在很流行在H5頁面滑屏的效果,，特別是在微信瀏覽器窗口中,，幾乎很多推廣的活動(dòng)是使用到上下滑屏，一開始和前端的同事一起合作寫滑屏效果花費(fèi)了很多的時(shí)間,，而且寫出來的頁面在瀏覽器的兼容上踩了很多坑,，于是果斷采用了框架。 最初接觸是使用iscroll4.js的框架,，畢竟它是比較成熟的,，用起來會(huì)讓人覺得放心，可惜它在android2.3下滑屏效果兼容性不是很好,，另外還有一個(gè)缺點(diǎn)是這個(gè)框架的有25K,，為了一個(gè)滑屏的效果加載25K的代碼是不劃算的~ 后來找了2個(gè)比較簡單的(輕量、少bug),，這里推薦給大家,，有需要的同學(xué)不要錯(cuò)過,。 (有些同學(xué)會(huì)問：為什么不使用左右滑屏呢？原因之一是在微信瀏覽器中,，向右滑動(dòng)屏幕可能導(dǎo)致用戶誤操退出當(dāng)前頁面) 下面給2個(gè)上下滑屏的例子~ 實(shí)例一,，簡單的上下滑屏 實(shí)例二，簡單的上下滑屏,，滑動(dòng)中附加了動(dòng)畫~ 設(shè)計(jì)滑屏框架的辦法一般有2種 控制父容器法 控制子容器法 控制父容器法 通過控制父元素的transform: translateY或margin-top或top的值來上下滑動(dòng)頁面，每次的位移的取值為當(dāng)前頁面高度~ 這里采用slip框架,，庫大小5.75K,，非常輕量，可以放心用在你的項(xiàng)目~ slip框架的頁面樣式需要自定義,，不過這里我簡單寫好了~ (如果你不使用框架,，推薦用transform: translate(X,Y)的寫法，首先transform: translate可設(shè)計(jì)高性能動(dòng)畫,，其次兼容android2.3+的系統(tǒng),，transform: translateY不兼容android2.3的系統(tǒng)) 兼容ios5+、android2.3+系統(tǒng),，其滑屏功能,，響應(yīng)靈敏~如果你只需要設(shè)計(jì)簡單的滑屏效果，可考慮它~ slip框架更多詳細(xì)的功能猛擊這里https://github.com/binnng/slip.js 代碼： 復(fù)制代碼 復(fù)制代碼 <!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> 復(fù)制代碼 復(fù)制代碼 下載demo 控制子容器法 方法是只顯示其中一個(gè)子元素,，其它隱藏,，滑屏?xí)r隱藏當(dāng)前元素，并顯示當(dāng)前元素的下一個(gè)同輩元素~ 這里采用fullPage框架,，庫大小7.69K~ fullPage框架的頁面樣式無需自定義,，已有寫好的 兼容ios5+、android2.3+系統(tǒng),，其滑屏功能,，效果比較豐富，支持縮放,、旋轉(zhuǎn),、透明度、自動(dòng)滑屏等動(dòng)畫效果~如果你需要設(shè)計(jì)精彩的滑屏效果,，可考慮它~ fullPage框架更多詳細(xì)的功能猛擊這里https://github.com/powy1993/fullpage 代碼： 復(fù)制代碼 復(fù)制代碼 <!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"> //禁止窗口的默認(rèn)滑動(dòng) 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> 復(fù)制代碼 復(fù)制代碼 下載demo 轉(zhuǎn)載自白色橡樹：http://www.cnblogs.com/PeunZhang/p/4185020.html 分類: html/css, 移動(dòng)開發(fā) 標(biāo)簽: 移動(dòng)開發(fā), 滑屏, slip, fullPage
|
|
|
