pageSwitch.js使用方法

摘要: 移动互联网网的火爆发展趋势,产生了许多商品营销推广散播的html5网页页面开发设计要求,而这种网页页面又通常以宣传单页面滚屏(onepage-scroll)种类占多数。根据业务流程上的必...

移动互联网网的火爆发展趋势,产生了许多商品营销推广散播的html5网页页面开发设计要求,而这种网页页面又通常以宣传单页面滚屏(onepage-scroll)种类占多数。根据业务流程上的必须,问世了pageSwitch.js软件,适用高达106种切页实际效果,更可适用自定切页动漫, 畅快充分发挥想像力!先看来一下实际效果:演试

 

如今内嵌适用的实际效果关键分成下列好多个类别:

fade:根据全透明度(opacity)为完成的渐显渐隐实际效果,事例

slice:根据规格(height、width)完成的裁剪实际效果,事例

scroll:根据部位(translate、top、left)完成的翻转实际效果,事例

slide:根据部位(translate、top、left)完成的滑屏实际效果,事例

flip:根据rotate转换完成的旋转实际效果,事例

flip3d:3d室内空间旋转,事例

flipPaper:翻开书实际效果,事例

flipClock:换页钟实际效果,事例

skew:根据skew转换完成的歪曲实际效果,事例

zoom:根据scale转换完成的放缩实际效果,事例

bomb:根据scale转换和全透明度(opacity)完成的发生爆炸实际效果,事例

 

// 最先在网页页面中引进pageSwitch.js
// 启用 pageSwitch 方式
var pw=new pageSwitch('container id',{
 duration:600, //int 网页页面衔接時间
 direction:1, //int 网页页面转换方位,0横着,1竖向
 start:0, //int 默认设置显示信息网页页面
 loop:false, //bool 是不是循环系统转换
 ease:'ease', //string|function 衔接曲线图动漫,详细正下方表明
 transition:'slide', //string|function转换场地方法,详细正下方表明
 mousewheel:false, //bool 是不是开启电脑鼠标滚轮转换
 arrowkey:false, //bool 是不是开启电脑键盘方位转换
 autoplay:false, //bool 是不是全自动播发幻灯片图片 增加
 interval:int //bool 幻灯片图片播发時间间距 增加
//启用方式
pw.prev(); //上一张
pw.next(); //下一张
pw.slide(n); //第n张
pw.setEase(); //再次设置衔接曲线图
pw.setTransition(); //再次设置转换场地方法
pw.freeze(true|false); //冻洁网页页面变换,冻洁后不能响运用户实际操作(启用slide prev next方式还能够开展)
pw.play(); //播发幻灯片图片
pw.pause(); //中止幻灯片图片
/* 2015.03.22 增加方式 */
pw.prepend(DOM_NODE); //前增网页页面
pw.append(DOM_NODE); //后增网页页面
pw.insertBefore(DOM_NODE,index); //在index前加上
pw.insertAfter(DOM_NODE,index); //在index后加上
pw.remove(index); //删掉第index网页页面
pw.destroy(); //消毁pageSwitch实际效果目标
/* 恶性事件关联
 * event可选择值:
 * before 网页页面转换前
 * after 网页页面转换后
 * update 网页页面转换中
 * dragStart 刚开始拖动
 * dragMove 拖动中
 * dragEnd 完毕拖动
pw.on(event,callback);
setEase 实例
内嵌适用 linear ease ease-in ease-out ease-in-out bounce等
bounce 跳跃衔接,很有趣,能够试一下
//注:这里传值也可立即在new pageSwitch目标时经ease主要参数传到
//设定匀速linear衔接实例:
pw.setEase('linear'); //因为内嵌了linear适用,因此能够立即应用
//倘若沒有内嵌linear,则应用自定衔接曲线图涵数以下
pw.setEase(function(t,b,c,d){
 return c*t/d + b;
大量曲线图涵数参照:zhangxinxu/Tween/blob/master/tween.js
setTransition 实例
适用下列转换场地实际效果:
fade 渐隐渐显
scroll 网页页面翻转
scrollCover 网页页面视差滚入滚出(前后左右网页页面速率不一致)
scrollCoverIn 一直下一张网页页面视差滚入
scrollCoverOut 一直当今网页页面视差滚出
slide 拖动转换,后面一种网页页面有放缩实际效果
slideCover 网页页面滑入滑出
slideCoverIn 一直下一张网页页面滑入
slideCoverOut 一直当今网页页面滑出
zoom 放缩转换
zoomCover 网页页面缩近缩出
zoomCoverIn 一直下一张网页页面缩入
zoomCoverOut 一直当今网页页面缩出
skew 歪曲转换
skewCover 网页页面扭进扭出
skewCoverIn 一直下一张网页页面扭入
skewCoverOut 一直当今网页页面扭出
flip 旋转转换
flipCover 网页页面翻入翻出来
flipCoverIn 一直下一张网页页面翻入
flipCoverOut 一直当今网页页面翻出来
bomb 变大转换
bombCover 网页页面大入大出
bombCoverIn 一直下一张网页页面大入
bombCoverOut 一直当今网页页面大出
留意:除开fade,全部实际效果都适用特定X或Y轴方位实际效果,要是在姓名后边再加X或Y就可以。 比如:scrollY flipX flipCoverX flipCoverInX 等相近。
//注:这里传值也可立即在new pageSwitch目标时经transition主要参数传到
//设定fade实际效果实例:
pw.setTransition('fade'); //因为内嵌了fade实际效果,因此能够立即启用。
//假设沒有内嵌fade,自定转换场地涵数以下
pw.setTransition(function(cpage,cp,tpage,tp){
 /* 衔接实际效果解决涵数
 * @param Element cpage 当今网页页面
 * @param Float cp 当今网页页面过多百分数。cp
优点和缺点自谈

沒有极致的物品,自己对这一部件也是有一些观点,其实不是强烈推荐大伙儿说这一物品可用一切状况。

优势:部件界定了外界实际操作架构,能够很层面的完成自身必须的动漫实际效果,而且内嵌了很多的实际效果,可用起來简易便捷。

缺陷:因为以便动漫界定逻辑性的简易,动漫一部分沒有应用css3的transition。与原生态transition动漫对比,尽管早已应用了requestAnimationFrame,可是因为一部分根据简单化实际操作的缘故,特性消耗不是可防止的。可是这仅仅在老型号上的主要表现,在终端设备特性越来越强劲的今日,这一部分特性消耗基本能够忽视。

综上所述,我本人提议,假如你的网页页面并不是大多数跑到三四年以前那类iphone4 android2.2等老设备上的,大能安心应用pageSwitch。

适配全服务平台,包含IE6+

 

自定动漫实际效果即根据界定一个涵数用于解决网页页面款式
//这儿以界定一个fade动漫款式来举例说明 
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){ 
 * @param HTMLElement cpage 参加动漫的前序网页页面 
 * @param Float cp 总体目标网页页面衔接比例,赋值范畴-1到1 
 * @param HTMLElement tpage 参加动漫的后序网页页面;假如非循环系统loop方式,则在转换到边沿网页页面时将会不会有该主要参数 
 * @param Float tp 总体目标网页页面衔接比例,赋值范畴-1到1;假如非循环系统loop方式,则在转换到边沿网页页面时将会不会有该主要参数 
 if('opacity' in cpage.style){ //检验全透明度css适用 
 cpage.style.opacity=1-Math.abs(cp); 
 if(tpage){ 
 tpage.style.opacity=Math.abs(cp); 
 }else{ 
 cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')'; 
 if(tpage){ 
 tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')'; 
//假如给你jQuery相近部件,能够更简易 
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){ 
 $(cpage).css('opacity',1-Math.abs(cp)); 
 $(tpage).css('opacity',Math.abs(cp)); 
Github & Demo

pageSwitch.js



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:微信小程序搭建