首先来看看接口说明：
实现的效果图如下：
完整的示例代码如下：
举例子：
默认转动：
<script type="text/javascript">
window.iRotate = (function(w,d){
function R(obj,json){
this.obj = (typeof obj=='object') ? obj : d.querySelector(obj);
this.startTime = Date.now();
this.timer = null;
this.rotate(json);
};
R.prototype = {
rotate : function(json){
var t = this,times = json['time'] || 1000;
clearInterval(t.timer)
t.timer = setInterval(function(){
var changeTime = Date.now(),tm = times - Math.max(0,t.startTime - changeTime + times),value = Tween[json['easing'] || 'eaSEOut'](tm,+json['start'] || 0,json['end'] - (+json['start'] || 0),times);
t.obj.style['transform'] = t.obj.style['-webkit-transform'] = 'rotate('+value%360+'deg)';
t.obj.setAttribute('data-rotate',value%360)
if(tm==times){
clearInterval(t.timer);
json.callback && json.callback.call(t.obj)
}
},10)
},stop : function(fn){
clearInterval(this.timer);
fn && fn.call(this.obj)
}
};
return R;
})(window,document);
var Tween = {linear: function (t,b,c,d){return ct/d + b;},eaSEOut: function(t,d){return -c (t/=d)*(t-2) + b;}}
//默认转动
;(function(){
var off = true,off2 = true;
RotateBtn.onclick = function(){
if(!off) return //判断是否在旋转
off = false
new iRotate('#RotateDiv',{
end :45+1800,time :5000,callback : function(){ //回调函数
this.innerHTML = this.getAttribute('data-rotate')
off = true
}
});
}
var r = null;
function rotate2(){ //递归持续旋转
r = new iRotate('#RotateDiv2',end :360,time :1000,easing : 'linear',callback : function(){
rotate2()
}
});
}
rotate2()
RotateBtn2.onclick = function(){
if(!off2) return //判断是否在旋转
off2 = false
r.stop(); //停止之前的旋转
new iRotate('#RotateDiv2',{
start : RotateDiv2.getAttribute('data-rotate'),end :65+1800,callback : function(){ //回调函数
this.innerHTML = this.getAttribute('data-rotate')
off2 = true
}
});
}
})();