jQuery加vue 3D盒子旋转展示

所属分类:媒体-图片展示

 36080  367  查看评论 (3)
分享到微信朋友圈
X
jQuery加vue 3D盒子旋转展示 ie兼容12

可以实现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也是一样的,只是代码会多一点而已,这里就不写出来了。

相关插件-图片展示

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 54128  356

jQuery模仿PPTCSS3介绍

jQuery模仿PPTCSS3介绍,使用鼠标滚轮进行切换
  图片展示
 28504  369

jQuery移动端对图片进行拖拽与旋转等操作

选着一个背景模板 然后对图片进行拖拽或者旋转一个角度 或者放大和缩小 进行调整 然后保存下来
  图片展示
 26310  303

jQuerh H5移动端图片预览插件fly_zomm_img.js

H5图标浏览插件,支持多图识别切换,支持手势放大切换
  图片展示
 67387  372

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    zouyoujun 0
    2019/4/30 13:41:48
    同问,移动端怎么不兼容
    回复
    夏目 0
    2018/12/21 11:37:42
    在地球上旅行的独角兽 ζ 0
    2018/9/11 14:47:53
    移动端怎么不兼容 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复