限制jQuery/CSS3旋转逻辑总是顺时针旋转

Question

我正在使用 jQuery transit 插件来旋转带有 4 个导航控件的块元素；每次单击导航项时，旋转块应旋转到该导航项的自定义数据属性（0、90、180 或 270 度）。

我可以成功做到这一点（参见我的 jsfiddle：http://jsfiddle.net/xkdgdhbk/，仅在 chrome 中测试过），但我想将旋转限制为始终顺时针旋转。如您所见，如果单击 180deg 它将顺时针旋转，但是如果单击 90deg 它将逆时针旋转。如果可能的话，我希望元素始终顺时针旋转。

有办法实现吗？

这是我在 jsfiddle 中的脚本：

$("span").click(function(){
    $(".rotate").transition({ rotate: $(this).attr("data-rotate") + "deg"});
});

Answer 1

您可以将之前的旋转值存储在 $(.rotate) 元素中，并将其用于每次旋转，如下所示

$().ready(function()
{
    $("span").click(function()
    {
        var lastRotate = $(".rotate").attr("data-rotate");
        if(lastRotate ==undefined)
        {
            lastRotate = 0;
        }
        lastRotate = parseInt(lastRotate);
        var newRotate = lastRotate + parseInt($(this).attr("data-rotate"));
        $(".rotate").transition({ rotate:newRotate  + "deg"}).attr("data-rotate",newRotate);
    });
});

限制jQuery/CSS3旋转逻辑总是顺时针旋转

Restrict jQuery/CSS3 rotate logic to always rotate clockwise

javascript

jquery

css

jquery-transit