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

Question

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

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

有没有办法做到这一点？

这是我来自 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);
    });
});