touch-ppt

一款无任何依赖的移动端ppt框架 #安装 1.你可以直接 点击下载

2.可以用npm下载

$npm install touch-ppt

#如何使用?

<script>
touchPPT = new touchPPT({
    '.page1':{  //<--第一页的节点
        '.p1_no1':{  //<--需要在第一页产生动画的节点
            type:'top',//<--动画特效
            speed: 2000,//<--动画速度
            route: 10 //<--时间轴 0.1秒为一个单位  10 = 等待1秒执行动画
        },
        '.p1_no2':{
            type:'join-bottom join-left',
            speed: 2000,
            route: 20
        }
    },
    '.page2':{
        '.p2_no1':{}
    }
},false)<-是否是垂直播放,不填写就是垂直播放
</script>

touchPPT(布景数组,是否是垂直); #type动效说明

动画效果可以叠加用【空格】分割 例:join-bottom join-left 右下角飞入 join-top join-hiding 从上渐入

所有动效:

join-top:从屏幕上部飞入
join-left:从屏幕左边飞入
join-right:从屏幕右边飞入
join-bottom:从屏幕下方飞入
out-top:向屏幕上部飞出
out-left:向屏幕左边飞出
out-right:向屏幕右边飞出
out-bottom:向屏幕下方飞出
join-hiding:渐入
out-hiding:渐出

#API说明

.nextPage()
进入下一页

.previousPage()
进入上一页

#作者补充说明 注意:
1.如果是脱离文档流的布局，尽量使用top和left进行定位，这样可以避免在部分浏览器中产生错误。
2.class样式请不要依赖于父级节点，不然会导致css失效

我会尽快解决这些问题

#联系作者 如有好的想法或者好的建议欢迎加我QQ:307052084 或者邮箱:[email protected]