Fullscreen-switching 全屏切换

全屏切换效果

PC端，引入jQuery，使用滚动条事件切换页面

<script src="jquery-1.11.2.min.js"></script>

移动端，引入Zepto，使用滑动手势切换页面

<script src="zepto.js"></script> <script src="event.js"></script> <script src="touch.js"></script>

引入全屏切换

<script src="fullscreen-switching.js"></script>
HTML

<div id="container"> <div class="section active" id="section0"> 页面1内容 </div> <div class="section" id="section1"> 页面2内容 </div> <div class="section" id="section2"> 页面3内容 </div> <div class="section" id="section3"> 页面4内容 </div> </div>
default options $("#container").switchPage({ 'container' : '#container',//容器 'sections' : '.section',//子容器 'easing' : 'ease',//特效方式，ease-in,ease-out,linear 'duration' : 1000,//每次动画执行的时间 'pagination' : true,//是否显示分页 'loop' : true,//是否循环 'keyboard' : true,//是否支持键盘 'direction' : 'vertical',//滑动的方向 horizontal,vertical 'onpageSwitch' : true//允许点击分页按钮切换到对应页面 });
Let's work together http://moerj.com