CSS3和JS:每点击90°到一个完整的圆圈

CSS3 and JS: Rotation on click per 90° to a full circle?

本文关键字：一个 JS #176 CSS3      更新时间：2023-09-26

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

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

单击将#line旋转90°的链接时，我切换类active。如果再次移除该类，#line将旋转回0°。

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

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

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

简单，请在此处查看。

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。如果这不是你想要的效果，一定要告诉我。希望能有所帮助。：）

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

最大的问题是，理论上你希望它从270到360，而不是0。所以仅仅设置四个类（0，90，180，270，…呃…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/else if/else与hasClass()一起使用，而不是将switch与attr('class')一起使用。实际上，可能有比类更好的字段来存储这些信息（例如HTML5data-字段）；我之所以使用class，是因为它可以更快/更容易地编写CSS和jQuery。

EDIT：为360deg选项添加了N2，从而完成旋转。不能100%确定N2到E的转换是否会根据需要旋转。感谢安东尼·米尔斯提到这一点。

EDIT2：完全删除了CSS样式，改为基于类和特定的data-字段（即data-turns）计算正确的旋转。

相关文章：