DOM对象旋转插件jquery.rotate.js

DOM对象选择插件jquery.rotate.js

  jQuery 插件jquery.rotate.js,可以实现DOM对象旋转效果。jquery.rotate.js支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么jquery.rotate.js是一个很好的选择。

 

jquery.rotate.js参数

参数 类型 说明 默认值
angle 数字 旋转一个角度 0
animateTo 数字 从当前的角度旋转到多少度 0
step 函数 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
easing 函数 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js
duration 整数 旋转持续时间,以毫秒为单位  
callback 函数 旋转完成后的回调函数
getRotateAngle 函数 返回旋转对象当前的角度
stopRotate 函数 停止旋转

jquery.rotate.js示例

1)将对象旋转45度

$('#img1').rotate(45);
//或
$('#img1').rotate({angle:45});

2)鼠标转动效果,鼠标进入移动180,移出复原

$('#img2').rotate({ 
    bind : {
        mouseover : function(){
            $(this).rotate({animateTo: 180});
        }, mouseout : function(){
            $(this).rotate({animateTo: 0});
        }
    }
});

3)对象不停旋转效果A

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

3)对象不停旋转效果B

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

3)对象不停旋转效果C

var rotation2 = function(){
    $('#img5').rotate({
        angle: 0, 
        animateTo: 360, 
        callback: rotation2,
        easing: function(x,t,b,c,d){
            return c*(t/d)+b;
        }
    });
}
rotation2();

点击下载jquery.rotate.js

加支付宝好友偷能量挖...


原创文章,转载请注明出处:DOM对象旋转插件jquery.rotate.js

评论(0)Web开发网
阅读(1298)喜欢(1)JavaScript/Ajax开发技巧