vue标签旋转_jQuery加vue 3D盒子旋转展示

a1823c5560b3ad43b8c3f85598189cd0.png

5b4b944461607cc871b1911f9854541f.png

插件描述:3D旋转盒子,全景展示,可选择图片,设置宽高

可以实现3D旋转展示,鼠标滑动实现动画效果,需要css3的支持,IE浏览器不可用。

使用方法

1. 引入插件jquery-touchrotate.js

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

});

改变图片和尺寸页面JS中带有注释。

这里使用VUE响应数据,用jquery操作dom也是一样的,只是代码会多一点而已,这里就不写出来了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值