jqueryrotate演示7种不同的旋转效果

收藏

之前我们做了两款rotate抽奖效果，请看右侧相关特效。本文介绍了jqueryroate七种不同的调用效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

演示一、旋转45度

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

演示二、鼠标悬浮和离开旋转动画效果

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

演示三、每50毫秒自动旋转

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

演示四、360度循环旋转

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

演示五、360度旋转回调

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

演示六、点击旋转一

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

});

演示七、点击旋转二

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