旋转
旋转
注:图片旋转可兼容至ie6。其他元素旋转只能兼容至ie9+。
一、引入
<script src="js/jquery.min.js"></script>
<script src="js/jQueryRotate.js"></script>
二、使用
- HTML结构
<div id="img"> </div>
- 初始化
//图片旋转
$("#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})
}
}
});
三、参数API
jQueryRotate.js插件集成了4个用于图片旋转的方法,分别为:
-
rotate(angle)
-
rotate(parameters)
-
getRotateAngle()
-
stopRotate()
1、rotate(angle):简单的将图片旋转任意角度。
$("#img").rotate(45);
2、rotate(parameters):通过配置参数来旋转图片。
parameters参数包括:
-
angle [Number] :图片旋转角度,默认为0度。
-
bind [Object] : 绑定事件。
-
animateTo [Number] :图片旋转到指定的角度,默认为0。
-
center [Array] : 定义图片旋转的中心点。
-
duration [Number] - 图片旋转的持续时间,默认为1000。
-
step [Function] :每一步动画后执行的回调函数。
-
easing [Function] :图片旋转的easing动画。
-
callback[Function] :图片旋转动画结束后的回调函数。
3、getRotateAngle():返回图片旋转的角度。
$("#img").rotate({
angle: 45,
bind: {
click : function(){
alert($(this).getRotateAngle());
}
}
});
4、stopRotate():停止图片旋转动画。
$("#img").rotate({
bind: {
click: function(){
$("#img").rotate({
angle: 0,
animateTo: 180,
duration: 6000
});
setTimeout(function(){
$("#img").stopRotate();
}, 1000);
}
}
});
作者:黄哈哈。
原文链接:https://www.cnblogs.com/jiajia-hjj/p/15175757.html
本博客大多为学习笔记或读书笔记,本文如对您有帮助,还请多推荐下此文,如有错误欢迎指正。