jQuery插件使用旋转jqueryrotate详细解释

jQuery插件使用旋转jqueryrotate详细解释
本文介绍了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程序设计有所帮助。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部