2015-11-24 13:18
Jqueryrotate插件分享，以及实现图片旋转的几种特效方式
前端时间找到了这个JQ的插件，主要是用于元素的旋转，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome等众多浏览器，下面阿萌来介绍下。
下面文本域中是插件代码，大家可以直接Ctrl+A全选复制保存为js直接调用：
插件附带的函数为rotate(parameters)，例如：$('#img1').rotate(45);
下面看属性~~~
| 其中rotate(parameters)中，parameters支持的属性有： | 类型 | 说明 | 默认值 |
| angle | 数字 | 设定一个旋转一个角度，立即执行 | 0 |
| animateTo | 数字 | 从当前的角度旋转到多少度 | 0 |
| step | 函数 | 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数 | 无 |
| easing | 函数 | 自定义旋转速度、旋转效果，需要使用 jQuery.easing.js | 无 |
| duration | 整数 | 旋转持续时间，以毫秒为单位 | |
| callback | 函数 | 旋转完成后的回调函数 | 无 |
| getRotateAngle | 函数 | 返回旋转对象当前的角度 | 无 |
| stopRotate | 函数 | 停止旋转 | 无 |
这表格还是挺简洁明了的，这个旋转插件并不是只能用在图片上，DIV元素也是可以的，但在这里阿萌主要介绍下4种图片旋转特效的使用方式，用法如下：
演示1 直接旋转一个角度
$('#img1').rotate(45);
演示2 鼠标移动到图片上执行旋转效果
$('#img2').rotate({
bind : {
mouseover : function(){
$(this).rotate({animateTo: 180});
}, mouseout : function(){
$(this).rotate({animateTo: 0});
}
}
});
演示3 不停旋转
var angle = 0;
setInterval(function(){
angle +=3;
$('#img3').rotate(angle);
}, 50);
var rotation = function (){
$('#img4').rotate({
angle: 0,
animateTo: 360,
callback: rotation
});
}
rotation();
var rotation2 = function(){
$('#img5').rotate({
angle: 0,
animateTo: 360,
callback: rotation2,
easing: function(x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation2();
演示4 点击图片执行旋转
$('#img6').rotate({
bind: {
click: function(){
$(this).rotate({
angle: 0,
animateTo: 180
});
}
}
});
var value2 = 0;
$('#img7').rotate({
bind: {
click: function(){
value2 +=90;
$(this).rotate({
animateTo: value2
});
}
}
});
