jqueryrotate演示7种不同的旋转效果_图片代码_图片插件_旋转_rotate

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

淘建站为您提供更多_图片代码_图片插件_旋转_rotate，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 256 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片插件难易程度：中级

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
            })
        }
    }
});