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

Question

我正在使用 jQuery transit 插件来旋转带有 4 个导航控件的 block 元素；每次点击导航项时，旋转 block 应旋转到该导航项的自定义数据属性(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);
    });
});