阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

Jqueryrotate插件分享,以及实现图片旋转的几种特效方式

前端时间找到了这个JQ的插件,主要是用于元素的旋转,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome等众多浏览器,下面阿萌来介绍下。

下面文本域中是插件代码,大家可以直接Ctrl+A全选复制保存为js直接调用:

插件附带的函数为rotate(parameters),例如:$('#img1').rotate(45);
下面看属性~~~

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

这表格还是挺简洁明了的,这个旋转插件并不是只能用在图片上,DIV元素也是可以的,但在这里阿萌主要介绍下4种图片旋转特效的使用方式,用法如下:

演示1 直接旋转一个角度
$('#img1').rotate(45);


演示2 鼠标移动到图片上执行旋转效果
$('#img2').rotate({ 
    bind : {
        mouseover : function(){
            $(this).rotate({animateTo: 180});
        }, mouseout : function(){
            $(this).rotate({animateTo: 0});
        }
    }
});


演示3 不停旋转
var angle = 0;
setInterval(function(){
    angle +=3;
    $('#img3').rotate(angle);
}, 50);

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

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


演示4 点击图片执行旋转
$('#img6').rotate({ 
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180
            });
        }
    }
});

var value2 = 0;
$('#img7').rotate({ 
    bind: {
        click: function(){
            value2 +=90;
            $(this).rotate({
                animateTo: value2
            });
        }
    }
});

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=699

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切