此页面为源码效果演示页面,您可以选择


访问A8源码网下载更多免费源码|返回此源码目录-下载此源码

示例一:图片旋转

$("#img").rotate(45);
//或者
$("#img").rotate({angle: 45});						
			

示例二:鼠标滑过旋转

$("#img").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}

});						
			

示例三:图片无限旋转

var angle = 0;
setInterval(function(){
angle+=3;
$("#img").rotate(angle);
},50);					
			

示例四:图片无限旋转(使用回调函数)

var rotation = function (){
$("#img").rotate({
angle:0,
animateTo:360,
callback: rotation
});
}
rotation();					
			

示例六:图片无限旋转(使用回调函数并自定义easing动画)

var rotation = function (){
$("#img").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration
return c*(t/d)+b;
}
});
}
rotation();					
			

示例六:点击图片旋转(使用jquery.easing插件)

$("#img").rotate({
bind:
{
click: function(){
$(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
}
}
});					
			

示例七:点击图片旋转指定的角度

var value = 0
$("#img").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});					
			

兼容浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不兼容IE8及以下浏览器访问.

来源:A8源码素材