3D旋转特效(touchrotate)

所属分类:其他,输入-动画效果,拖和放

 5192  39  查看评论 (5)
3D旋转特效(touchrotate) ie兼容11

更新时间:2017/10/25 下午5:53:01

更新说明:

1 . 新增了参数 isTransition , 为true时表示有动画效果 , 为false时没有动画效果

2 . 修改bug : 鼠标左键滑动动画进行时 , 如果滑动(左键未点击)box,动画会有异常


更新时间:2017/10/25 下午2:55:56

更新说明:修复了 一个bug该bug只会出在使用JQuery上, 使用Zepto没有这个bug. 

该bug会导致PC端案例演示异常, 当滑动box动画进行中时 , 如果鼠标再次滑动(没有点击鼠标左键) 会干扰动画的bug,


1. 引入插件(前提先引入JQuery或者Zepto)

<script src="jquery-touchrotate.js"></script>

2. 初始化插件

$('.box').touchrotate();

3. 可以配置相关参数

$('.box').touchrotate({
    //初始3D旋转角度
    rotateX: -15,
    rotateY: 15,
    //数值越小 , 旋转速度越快
    speedX: 2,
    speedY: 2,
    // 旋转的倍数, 越大旋转的圈数越多
    multipleX: 50,
    multipleY: 50,
    // 动画持续的时间, 单位是S
    time: 2,
    //模式 0:表示匀速运动 , 运动中途可以重新开始 , 1表示先加速后减速(动画过程中不可滑动,体验效果差)
    model: 0
});
相关插件-动画效果,拖和放

基于Three.js 3d波浪墙

Three.js波浪墙,3D效果
  动画效果
 14483  153

一个不错的下雪效果

很简单,导进去直接用
  动画效果
 13325  156

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 17903  13

jQuery手机网页点赞效果

常用网页、移动端的点赞效果
  动画效果
 4300  58

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    黑白熊 0
    2018/1/2 16:04:49
    依秋无泪 0
    2017/10/25 1:49:08

    移动端的演示地址 :  http://bm.huangxiaoyong.com/3D/3D-zepto.html

    PC端的演示地址   :  http://bm.huangxiaoyong.com/3D/3D-jquery.html 

        依秋无泪0
        2017/10/25 2:07:59

        可以在以上地址查看演示 , 已解决已知的bug

        依秋无泪0
        2017/10/25 2:15:14

        移动端的演示效果比PC端好很多 , 因为这个插件一开始基于Zepto写的, 后来兼容了JQuery ,一些小细节没处理好 ,  所以PC端还有一些小问题 ,后期会修复

        依秋无泪0
        2017/10/25 15:05:12

        已修复PC端JQuery 的相关bug , 效果等同于移动端的Zepto

    回复
取消回复