Question

我使用jQuery传输插件来旋转带有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旋转逻辑以始终顺时针旋转

1 个答案: