单击旋转增量图像

问题描述

我正在尝试将编号的拨号图像添加到我的网站，并在单击该按钮时以小幅旋转。从这里获取的javascript正是我在寻找的内容：

I'm trying to add a numbered dial image to my website that rotates in small increments when it is clicked. The javascript from here is exactly what I'm looking for: CSS3 transition on click using pure CSS

但是使用该代码，它只会旋转一次，然后再次单击，它将返回到其原始位置。我已经尽我最大的能力来摆弄代码（这包括我尝试随机的东西，直到某些东西起作用），并且设法使它在第一次和第二次点击时旋转了36度，但我不确定之后如何使其继续旋转。我希望它能够在每次单击时旋转36度，以便在单击10次后将其恢复到原始位置。

But using that code, it only rotates once, then when clicked again, it moves back to its original position. I've fiddled around with the code to the best of my abilities (which consists of me trying random things until something works) and I've managed to make it rotate 36 degrees on the first and second click, but I'm not sure how to make it continue rotating after that. I would like it to be able to rotate 36 degrees on each click so that after clicking 10 times, it brings it back to its original position.

我确定解决方案非常简单，但我似乎无法弄清楚。任何帮助将不胜感激。

I'm sure the solution is very simple, but I can't seem to figure it out. Any help would be appreciated.

以下是JavaScript：

Here's the javascript:

$( ".crossRotate" ).click(function() {
//alert($( this ).css( "transform" ));
if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(36deg)");
} else {
    $(this).css("transform","rotate(72deg)" );
}

}））；

和jsfiddle演示：

And the jsfiddle demo: http://jsfiddle.net/rv5PR/472/

推荐答案

您将需要获取当前旋转值，然后添加 36 ，然后使用该值设置元素的旋转：

You will need to get the current rotation value, then add 36 to that, then use that value for setting the rotation of the element:

$( ".crossRotate" ).click(function() {
    var rotation = getRotationDegrees($(this)) + 36;
    $(this).css("transform","rotate("+rotation+"deg)");
});

获取学位实际上是一个棘手的问题，我正在使用。

Getting the degree is rotation is actually kind of tricky, I'm using this answers solution to do that.

编辑
显然，有一种更好的方法可以处理此问题，我们可以简单地使用一个变量来存储度数并以 36 。元素突然在另一个方向上绕360度移动的问题是由于旋转从围绕 360 的某个数字变为接近于的一个数字0 。它检测到它较小，因此逆时针旋转。默认情况下，元素如何存储旋转值将在角度上执行％360 ，但只需遍历 360 且永不重置

EditAcually there is a better way to handle this, we can simply have a variable store the degrees and increment that by 36. The problem with the element suddenly moving around 360 degrees in the other direction is due to the rotation going from some number around 360 to a number close to above 0. It detects that as being smaller and hence goes counter-clockwise. How the element stores it's rotation will by default do %360 on the angle, but simply going over 360 and never resetting the angle to a lower value will make it so it never go counter-clockwise.

var degrees = 0;
$( ".crossRotate" ).click(function() {
    degrees += 36;
    $(this).css("transform","rotate("+degrees+"deg)");
});

这篇关于单击旋转增量图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！