网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

jQueryRotate旋转插件 使用说明

关注我吧
 2017/6/26 10:12:33 阅读次数:583

一、概述:

最近公司准备做一个html5的转盘效果,所以在网上找了一些资料,发现这个插件(jQueryRotate)挺不错的所以就记录下来。使用也很方便,可以快速制作动画。效果如下:

jQueryRotate旋转插件 使用说明

二、参数说明:

参数 类型 说明 默认值
angle 数字 旋转一个角度 0
animateTo 数字 从当前的角度旋转到多少度 0
step 函数 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
easing 函数 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js
duration 整数 旋转持续时间,以毫秒为单位
callback 函数 旋转完成后的回调函数
getRotateAngle 函数 返回旋转对象当前的角度
stopRotate 函数 停止旋转

jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。调用和方法:

rotate(angle)angle参数:[Number] – 默认为 0 –

根据给定的角度旋转图片例如:

$("#img").rotate(45);或 $("#img").rotate({angle:45})

rotate(parameters)parameters参数:[Object] 包含旋转参数的对象。

支持的属性:

.angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行(无动画)。

例如:

         $("#img").rotate({angle:45});
         
.bind属性:[Object] 对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用- $(this).rotate(…)。

例如(click on arrow):

         	$("#img").rotate({
              bind:{
              click: function(){
                      $(this).rotate({
                          angle: 0,
                          animateTo:180
                      })
                  }
              }
            });
         
.animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)
.duration属性:[Number] – 指定使用animateTo的动画执行持续时间

例如 (click on arrow):

        $("#img").rotate({
              bind:{
                  click:function(){
                      $(this).rotate({
                          duration:6000,
                          angle: 0,
                          animateTo:100
                      })
                  }
              }
         });
        
.step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
.easing属性:[Function] – 默认 (see below)– 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js (不作说明)

三、结语

使用心得:使用转盘的时候需要记录上一个转盘所在的位置所以使用angle:即可做到,不需要动画效果。

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭