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

来源:https://www.sucaihuo.com/js/238.html 2015-08-20 13:20浏览(14666) 收藏

之前我们做了两款rotate抽奖效果,请看右侧相关特效。本文介绍了jqueryroate七种不同的调用效果。
jqueryrotate演示7种不同的旋转效果
分类:图片代码 > 图片插件 难易:中级
查看演示 下载资源 下载积分: 106 积分

HTML

<img src="images/chrome.png" width="256" height="256"/>

演示一、旋转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
            })
        }
    }
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2