欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > HTML5应用 >
收 藏
2600

pageSwitch-支持121种过渡效果的JavaScript页面切换插件

所属栏目:HTML5应用 来源:未知 内容发布:做网站吧

 pageSwitch.js是一款支持121种页面切换效果的javascript页面切换插件。pageSwitch插件适用场景为全屏切换,即一切一屏。它支持桌面和移动手机,支持多达121种切页效果,还支持自定义切页动画。

 


查看演示     下载插件

  使用方法

  使用该页面切换插件需要引入pageSwitch.js文件。

1 <script type="text/javascript" src="src/pageSwitch.js"></script>

 

  HTML结构

  pageSwitch页面切换插件的基本HTML结构采用嵌套<div>的HTML结构。

01 <div id="imgs">
02   <div><img src="images/1.jpg" /></div>
03   <div><img src="images/2.jpg" /></div>
04   <div><img src="images/3.jpg" /></div>
05   <div><img src="images/4.jpg" /></div>
06   <div><img src="images/5.jpg" /></div>
07   <div><img src="images/6.jpg" /></div>
08   <div><img src="images/7.jpg" /></div>
09   <div><img src="images/8.jpg" /></div>
10   <div><img src="images/9.png" /></div>
11 </div>
12 <!--导航-->
13 <div id="navs">
14   <a href="javascript:;" class="active"></a>
15   <a href="javascript:;"></a>
16   <a href="javascript:;"></a>
17   <a href="javascript:;"></a>
18   <a href="javascript:;"></a>
19   <a href="javascript:;"></a>
20   <a href="javascript:;"></a>
21   <a href="javascript:;"></a>
22   <a href="javascript:;"></a>
23 </div>

 

  初始化插件

  可以通过下面的方法来初始化一个pageSwitch对象。

01 var pw=new pageSwitch('container id',{
02     duration:600,           //int 页面过渡时间
03     direction:1,            //int 页面切换方向,0横向,1纵向
04     start:0,                //int 默认显示页面
05     loop:false,             //bool 是否循环切换
06     ease:'ease',            //string|function 过渡曲线动画,详见下方说明
07     transition:'slide',     //string|function转场方式,详见下方说明
08     freeze:false,           //bool 是否冻结页面(冻结后不可响<a href="http://www.html5cn.org/portal.php?mod=list&catid=20" target="_blank" class="relatedlink">应用</a>户操作,可以通过 `.freeze(false)` 方法来解冻)
09     mouse:true,             //bool 是否启用鼠标拖拽
10     mousewheel:false,       //bool 是否启用鼠标滚轮切换
11     arrowkey:false,         //bool 是否启用键盘方向切换
12     autoplay:false,         //bool 是否自动播放幻灯 新增
13     interval:int            //bool 幻灯播放时间间隔 新增
14 });

 

  方法

  pageSwitch插件的可用方法有:

01 pw.prev();                  //上一张
02 pw.next();                  //下一张
03 pw.slide(n);                //第n张
04 pw.setEase();               //重新设定过渡曲线
05 pw.setTransition();         //重新设定转场方式
06 pw.freeze(true|false);      //冻结页面转换,冻结后不可响应用户操作(调用slide prev next方法还可以进行)
07   
08 pw.play();                  //播放幻灯
09 pw.pause();                 //暂停幻灯
10   
11 pw.prepend(DOM_NODE);       //前增页面
12 pw.append(DOM_NODE);        //后增页面
13 pw.insertBefore(DOM_NODE,index);    //在index前添加
14 pw.insertAfter(DOM_NODE,index);     //在index后添加
15 pw.remove(index);           //删除第index页面
16 pw.isStatic();              //是否静止状态
17   
18 pw.destroy();               //销毁pageSwitch效果对象

 

  事件

  可以通过.on()为pageSwitch对象绑定事件。

01 /* 事件绑定
02  * event可选值:
03  *
04  * before 页面切换前
05  * after 页面切换后
06  * update 页面切换中
07  * dragStart 开始拖拽
08  * dragMove 拖拽中
09  * dragEnd 结束拖拽
10  */
11 pw.on(event,callback);

 

  应用举例

 

  设置easing效果

  pageSwitch插件支持内置的linear、ease、ease-in、ease-out、ease-in-out、bounce等easing动画效果。

1 //注:此处传值也可直接在new pageSwitch对象时经ease参数传入
2 //设置匀速linear过渡示例:
3 pw.setEase('linear'); //由于内置了linear支持,所以可以直接使用
4   
5 //假如没有内置linear,则使用自定义过渡曲线函数如下
6 pw.setEase(function(t,b,c,d){
7     return c*t/d + b;
8 });

  更多曲线函数参见:https://github.com/zhangxinxu/Tween/blob/master/tween.js

 

  设置Transition过渡动画

  pageSwitch插件支持的动画过渡效果有:

  •   fade:渐隐渐显。
  •   slice:裁切效果。
  •   scroll:页面滚动。
  •   scroll3d:3d页面滚动。
  •   scrollCover:页面视差滚入滚出(前后页面速度不一致)。
  •   scrollCoverReverse:同上反向。
  •   scrollCoverIn:总是下一张页面视差滚入。
  •   scrollCoverOut:总是当前页面视差滚出。
  •   slide:滑动切换,后者页面有缩放效果。
  •   slideCover:页面滑入滑出。
  •   slideCoverReverse:同上反向。
  •   slideCoverIn:总是下一张页面滑入。
  •   slideCoverOut:总是当前页面滑出。
  •   flow:封面滑动切换。
  •   flowCover:页面滑入滑出。
  •   flowCoverReverse:同上反向。
  •   flowCoverIn:总是下一张页面滑入。
  •   flowCoverOut:总是当前页面滑出。
  •   zoom:缩放切换。
  •   zoomCover:页面缩进缩出。
  •   zoomCoverReverse:同上反向。
  •   zoomCoverIn:总是下一张页面缩入。
  •   zoomCoverOut:总是当前页面缩出。
  •   skew:扭曲切换。
  •   skewCover:页面扭进扭出。
  •   skewCoverReverse:同上反向。
  •   skewCoverIn:总是下一张页面扭入。
  •   skewCoverOut:总是当前页面扭出。
  •   flip:翻转切换。
  •   flip3d:3d翻转切换。
  •   flipClock:翻页钟效果。
  •   flipPaper:翻书本效果。
  •   flipCover:页面翻入翻出。
  •   flipCoverReverse:同上反向。
  •   flipCoverIn:总是下一张页面翻入。
  •   flipCoverOut:总是当前页面翻出。
  •   bomb:放大切换。
  •   bombCover:页面大入大出。
  •   bombCoverReverse:同上反向。
  •   bombCoverIn:总是下一张页面大入。
  •   bombCoverOut:总是当前页面大出。

  注意:除了fade,所有效果都支持指定X或Y轴方向效果,只要在名字后面加上X或Y即可。 例如:scrollY、flipX、flipCoverX、flipCoverInX等类似。

01 //注:此处传值也可直接在new pageSwitch对象时经transition参数传入
02 //设置fade效果示例:
03 pw.setTransition('fade'); //由于内置了fade效果,所以可以直接调用。
04   
05 //假定没有内置fade,自定义转场函数如下
06 pw.setTransition(function(cpage,cp,tpage,tp){
07     /* 过渡效果处理函数
08      * @param HTMLElement cpage 参与动画的前序页面
09      * @param Float cp 目标页面过渡比率,取值范围-1到1
10      * @param HTMLElement tpage 参与动画的后序页面;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数
11      * @param Float tp 目标页面过渡比率,取值范围-1到1;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数
12      */
13   
14     if('opacity' in cpage.style){
15         cpage.style.opacity=1-Math.abs(cp);
16         if(tpage){
17             tpage.style.opacity=Math.abs(cp);
18         }
19     }else{
20         cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')';
21         if(tpage){
22             tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')';
23         }
24     }
25 });
26   
27 //如果你有jQuery类似组件,可以更简单
28 pw.setTransition(function(cpage,cp,tpage,tp){
29     $(cpage).css('opacity',1-Math.abs(cp));
30     $(tpage).css('opacity',Math.abs(cp));
31 });

 

  jQuery/Zepto适配器

view source
 
print?
01 $.fn.extend({
02     pageSwitch:function(cfg){
03         this[0].ps=new pageSwitch(this[0],cfg);
04         return this;
05     },
06     ps:function(){
07         return this[0].ps;
08     }
09 });
10   
11 //使用
12 $(container_id).pageSwitch({
13     duration:1000,
14     transition:'slide'
15 });
16 //由于链式调用返回依然是jq对象自身,所以如果需要使用pageSwitch对象方法,
17 //需要通过 `.ps()` 方法获取对pageSwitch对象的引用。
18 $(container_id).ps().next();

  pageSwitch页面切换插件的github地址为:https://github.com/qiqiboy/pageSwitch

文章关键词:pageSwitch  JavaScript  切换插件  

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:创意jQuery和CSS3滑动覆盖响应式幻灯片特效
下一篇:windows8 Metro风格打开面板动画UI设计

返回顶部