网页前端设计

一、概述:

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

二、参数说明：

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：即可做到，不需要动画效果。

（完）

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