本文
介绍了jQuery
插件jqueryrotate轮换使用。
分享给您
参考,如下:
CSS3提供了各种变形效果,如矩阵的变形、位移、缩放、旋转和倾斜等,使
网页更加生动,有趣,不再一动不动。然后在以下版本的IE10
浏览器不
支持CSS3
转换,虽然IE有私有财产过滤器(过滤器),但它是不全面的,和
性能影响不好。
今天,我们介绍一个jQuery插件,jqueryrotate,可以实现旋转效果。jqueryrotate支持所有主流浏览器,包括IE6。如果你想在一个低版本的IE实现旋转,然后jqueryrotate是个不错的选择。
兼容性 jqueryrotate支持所有主流浏览器,包括IE6。jqueryrotate是使用CSS3变换
属性实现先进的浏览器,并使用VML在低版本的IE,当然,你可以使用IE
条件注释,使用jqueryrotate低版本的IE,和先进的浏览器直接使用CSS3。
使用
方法 1 /演示
45angle / /旋转
$(
文档主体)Click(
函数(){)
1
$('。Divone '),旋转(45);
2
$('。Divone)。({ 45 }旋转角度:);
});
2 /演示
鼠标效应
1
$(','旋转({ Divone)。
绑定:{
鼠标悬停:函数(){
$(这),旋转({ 180 } animateto:);
},
Mouseout:函数(){
$(这),旋转({ 0 } animateto:);
}
}
});
2
$('。Divone)。Mouseover(function(){)
$(这),旋转({ 180 } animateto:);
})。Mouseout(function(){)
$(这),旋转({ 0 } animateto:);
});
3演示/旋转
1
var角度= 0;
setInterval(){()函数(
角度= 3;
$('。Divone')旋转(角度);
},50);
2
var旋转=函数(){()
$(','旋转({ Divone)。
角度:0,
AnimateTo:360,
回调:旋转
})
}
旋转();
3
var旋转=函数(){()
$(','旋转({ Divone)。
角度:0,
AnimateTo:360,
回调:旋转,
放松:函数(x,t,b,c,d){
返回C(t/d)+ b;
}
})
}
旋转();
4单击演示/旋转
1
$('。Divone)。Click(function(){)
$(这),旋转({
角度:0,
AnimateTo:180,
宽松:easing.easeinoutexpo美元。
});
});
var = 0;
$('。Divone)。Click(function(){)
瓦尔= 90;
$(这),旋转({
AnimateTo:瓦尔
});
});
参数 参数
类型 解释
默认值
角
数
旋转一个角度
零
animateto
数
从当前角度旋转多少钱
零
步
功能 在每个
动画步骤中
执行的回调函数,当前角值作为函数的第一个参数。
没有什么
宽松
功能
自定义的旋转
速度,旋转的效果,需要使用jquery.easing.js
没有什么
持续时间
整数
旋转的持续时间,以毫秒为单位
回调
功能
完成旋转后的回调函数
没有什么
getrotateangle
功能
返回旋转物体的当前角度。
没有什么
stoprotate
功能
停止旋转
没有什么
演示使用的是
图片,但jqueryrotate不仅能够用于图片,但其他元素如div也可以使用。同时,你可以发挥自己的想象力,让更多的特殊效果在旋转。
更多有关jQuery相关内容的读者可以看到特别站:jQuery Windows
操作技能
希望本文能对jQuery
程序设计有所帮助。