2

可能是一个简单的问题，但是……我不知道。

<a href="#" id="line">|</a>​

active单击旋转#line90°的链接时，我切换了一个类。如果再次删除该类，则#line旋转回 0°。

我想知道如何让它在一个完整的圆圈内旋转？

所以我在它第一次向右旋转 90° 时单击它。如果我再次单击它，它会旋转回（向左）到 0°。但是我希望它再次向右旋转直到达到 180°。等等。所以它应该在一个完整的圆圈内旋转。

http://jsfiddle.net/5mCTd/2/

4

3 回答 3

5

很简单，看这里。

var angle = 90;    

$('#line').click(function() {
    $(this).css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=90;
});​

我已经注释掉了不需要的 CSS 和 JS。如果这不是您想要的效果，请告诉我。希望能帮助到你。:)

于 2012-07-10T20:57:50.173 回答
0

最简单的方法：使用 JavaScript。每次将旋转量增加90，并将元素的内联样式设置为新的旋转量。

最大的问题是理论上你希望它从 270 到 360 而不是 0。所以仅仅设置四个类（0、90、180、270，...呃...0）是没有帮助的。

于 2012-07-10T20:01:45.953 回答
0

这里棘手的部分（感谢 Anthony Mills 指出）是从 270 到 360 的过渡——不能简单地返回 0，必须转到 360、450 等。因此，我们需要采用当前角度并始终添加 90。

尝试从transform属性中获取当前角度并将其添加 90 是不值得的，因为变换被浏览器存储为矩阵，您必须从矩阵逆向工程角度（不是很困难并且有脚本可以做到这一点，但是为什么要麻烦呢？）

相反，我将使用 N、E、W、S（北、东、西和南）来表示州，以便您知道字母的来源。默认值为 N，所以...

<a href="#" id="line" class="N" data-turns="0">|</a>

然后是一点 jQuery。我使用该类来计算当前角度，因此我不必从transform.

$('#line').click(function() {
    var rot = 360 * $(this).attr('data-turns');
    switch ($(this).attr('class'))
    {
        case 'N':
            rot += 0;
            $(this).removeClass('N').addClass('E');
            break;
        case 'E':
            rot += 90;
            $(this).removeClass('E').addClass('S');
            break;
        case 'S':
            rot += 180;
            $(this).removeClass('S').addClass('W');
            break;
        case 'W':
            rot += 360;
            $(this).attr('data-turns', $(this).attr('data-turns') + 1);
            $(this).removeClass('W').addClass('N');
            break;
        default:
            $(this).attr('class', 'N');
    }
    $(this).css('transform', 'rotate('+rot+'deg)');
});

请注意，这仅在您不使用任何类时才有效#line。如果是，则必须使用if// with而不是with 。确实，可能有比类更好的字段来存储这些信息（例如 HTML5 字段）；我只是使用类，因为它更快/更容易编写 CSS 和 jQuery。else ifelsehasClass()switchattr('class')data-

编辑：N2为360deg选项添加，以便旋转完成。不是 100% 确定N2toE转换是否会根据需要旋转。感谢 Anthony Mills 提到这一点。

EDIT2：完全删除了 CSS 样式，切换到基于类和特定data-字段计算正确的旋转，即data-turns.

于 2012-07-10T20:06:49.427 回答