jquery - 如何将 jquery UI slider 与 jqueryrotate 插件相结合？

Question

有人希望能够在没有 handle 的情况下旋转图像。我认为最好的方法是使用 UI slider 。有没有办法使用 UI slider 使 slider 将图像旋转 360 度。

fiddle 中是将点击事件绑定(bind)到图像的示例。点击功能旋转图像。我希望 uI slider 能够做到这一点。有人请帮助谢谢。

'$("#slider").slider({
值(value):90，
最大值:1000，
分钟:90，
幻灯片:函数(事件，用户界面){
值(value)+=90；
$("img.resize-image").rotate({ animateTo:value});}}); http://jsfiddle.net/kt7z8jaf/

Answer 1

为什么要使用jquery rotate？这对我有用:

$("#slider").slider({
    value: 0,
    max: 360,
    min: 0,
    slide: function(event, ui) {

        $("#image").css({
          '-webkit-transform': 'rotateZ('+ui.value+'deg)',
          '-moz-transform': 'rotateZ('+ui.value+'deg)',
          '-o-transform': 'rotateZ('+ui.value+'deg)',
          'transform': 'rotateZ('+ui.value+'deg)',
        })

}});

http://jsfiddle.net/kt7z8jaf/1/

注意:我不得不在 js 中包含整个 jquery ui 东西，因为它没有正确加载，但你只需要我粘贴在这里的部分。