pageSwitch 是一款可以整屏滚动的js插件,可以设置多种切换效果,手机上也能很好的实现。
代码出处:https://github.com/qiqiboy/pageSwitch
使用说明
一、下载代码
在 https://github.com/qiqiboy/pageSwitch 下载源代码。
二、构建网页,引入相关文件
1、新建html页面,如果是移动端看的话,需要在页面头部插入视口说明:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
2、引入 jquery.js 库文件,引入 pageSwitch.js 文件。
三、写出你要分几屏的html结构,并配上样式
1、在页面里写出你要分几屏的html代码,并把他们都套在一个层内,假设你要分2屏,如下:
<div id="pages">
<div class="page page1 current">
<h1>第一页</h1>
<div class="box">
<p>可以用用鼠标或者手指拖动页面,亦可使用鼠标滚轮、键盘方向键等</p>
</div>
</div>
<div class="page page2">
<h1>第二页</h1>
<div class="box">
<p>不久前,针对微博用户@Mor-小某的“锤子手机还是不错的!试用后感觉很不错!就是3000多买个它感觉贵了!定价2600的话还能接受!”这句话,罗永浩在微博上表示“明白,我们考虑一下”。但就在大家还没回过神来的时候锤子科技已经迅速宣布了降价,其中16GB 3G版的售价直接下调到了1980元,32G/64G也分别调整到了2080/2480元。</p>
</div>
</div>
</div>
2、为这个结构配上必须的样式,如下:
#pages { position: relative; overflow: hidden; width: 100%; max-width: 768px; height: 100%; margin: 0 auto;}
.page { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
四、写入JavaScript启动代码
你可以直接复制官网上的启动代码,也可以修改后使用,这里给出修改过后,使当前层的class加上current的样例:
<script>
window.onload=function () {
var pw=new pageSwitch('pages',{
duration:800, //int 页面过渡时间
direction:1, //int 页面切换方向,0横向,1纵向
start:0, //int 默认显示页面
loop:false, //bool 是否循环切换
ease:'ease', //string|function 过渡曲线动画,详见下方说明
transition:'slide', //string|function转场方式,详见下方说明
freeze:false, //bool 是否冻结页面
mouse:true, //bool 是否启用鼠标拖拽
mousewheel:true, //bool 是否启用鼠标滚轮切换
arrowkey:true, //bool 是否启用键盘方向切换
autoplay:false //bool 是否自动播放幻灯 新增
});
//以下内容是回调函数,不是必须的
pages=pw.pages;
pw.on('before',function(now,prev){//now是切换前当前页面索引
$(pages[now]).removeClass('current');
});
pw.on('after',function(now,prev){//now是切换后当前页面索引
$(pages[now]).addClass('current');
});
});
</script>