1、slip只有6.3k可以说是非常小了,主要是通过css3里面的transform来改变的位置,控制的是父容器,使用也非常简单,具体信息移步slip.js。一个简单的demo如下
<!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="background-color: gray;"> 第1屏 </div> <div class="swipe-box" style="background-color: green;"> 第2屏 </div> <div class="swipe-box" style="background-color: orange;"> 第3屏 </div> <div class="swipe-box" style="background-color: blue;"> 第4屏 </div> </article> </div> </body> <script type="text/javascript" src="js/slip.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>
2、fullpage也只有7k,它是通过显示隐藏来实现的,而且支持缩放等效果,网上还有一个大的fullpage,功能更全主要在pc端使用的比较多,不要搞混了,下面介绍这个是不依赖JQ的,那个大的是依赖JQ的,具体信息移步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>
<body>
<div id="pageContain" class="page-wrap">
<div class="page page1 current" style="background-color: green;">
<div class="contain">
第一屏
</div>
</div>
<div class="page page2" style="background-color: yellow;">
<div class="contain">
第二屏
</div>
</div>
<div class="page page3" style="background-color: gray;">
<div class="contain">
第三屏
</div>
</div>
<div class="page page4" style="background-color: purple;">
<div class="contain">
第四屏
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/fullPage.js"></script>
<script type="text/javascript">
//禁止窗口的默认滑动
document.ontouchmove = function(e){
e.preventDefault();
}
runPage = new FullPage({
id : 'pageContain',
slideTime : 800,
continuous : true,
effect : {
transform : {
translate : 'Y',
scale : [0.5, 1],
rotate : [0, 0]
},
opacity : [0, 1]
},
mode : 'wheel,touch',
easing : 'ease',
});
</script>
</html>