DOM对象旋转插件jquery.rotate.js
jQuery 插件jquery.rotate.js,可以实现DOM对象旋转效果。jquery.rotate.js支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么jquery.rotate.js是一个很好的选择。
jquery.rotate.js参数
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
angle | 数字 | 旋转一个角度 | 0 |
animateTo | 数字 | 从当前的角度旋转到多少度 | 0 |
step | 函数 | 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数 | 无 |
easing | 函数 | 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js | 无 |
duration | 整数 | 旋转持续时间,以毫秒为单位 | |
callback | 函数 | 旋转完成后的回调函数 | 无 |
getRotateAngle | 函数 | 返回旋转对象当前的角度 | 无 |
stopRotate | 函数 | 停止旋转 | 无 |
jquery.rotate.js示例
1)将对象旋转45度
$('#img1').rotate(45); //或 $('#img1').rotate({angle:45});
2)鼠标转动效果,鼠标进入移动180,移出复原
$('#img2').rotate({ bind : { mouseover : function(){ $(this).rotate({animateTo: 180}); }, mouseout : function(){ $(this).rotate({animateTo: 0}); } } });
3)对象不停旋转效果A
var angle = 0; setInterval(function(){ angle +=3; $('#img3').rotate(angle); }, 50);
3)对象不停旋转效果B
var rotation = function (){ $('#img4').rotate({ angle: 0, animateTo: 360, callback: rotation }); } rotation();
3)对象不停旋转效果C
var rotation2 = function(){ $('#img5').rotate({ angle: 0, animateTo: 360, callback: rotation2, easing: function(x,t,b,c,d){ return c*(t/d)+b; } }); } rotation2();
加支付宝好友偷能量挖...
原创文章,转载请注明出处:DOM对象旋转插件jquery.rotate.js