Working Demo in Fiddle

Question

现在，当用户点击此图片时，它会旋转180度我想更新它来执行此操作：如果用户单击图像，它将旋转180度，但如果用户再次单击图像，它将旋转回原始位置。

这是我的javascript：

var value = 0
$("#row-1").click(function(){
    value +=180;
    $("#image1").rotate({ animateTo:value});
});

HTML：

<th style="text-align:left;" width="20%" id="row-2">
    Company<br>
    <span class="move_right">Name</span> 
    <img src="/images/sort-arrow-up.png" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2" />
</th>

Answer 1

维护一个单独的变量，以确定更改角度的数量，并在每次点击时取消它：

var value = 0;
var delta = 180;
$("#row-1").click(function(){
    value += delta;
    delta = -delta;
    $("#image1").rotate({ animateTo:value});
});

Answer 2

我建议在开头设置你的值= -180然后每次用户点击你做

value = value * -1;

这将给出：180，-180,180，-180（...）等等。这是你想要的吗？

Answer 3

var angle = 180;
$("#row-1").toggle(function(){
    value +=angle ;
    $("#image1").rotate({ animateTo:value});
    angle = angle*(-1);
});

Answer 4

我知道这已经得到了解答，但我想在这里找到答案。还存在对jQueryRotate plugin的依赖。

Working Demo in Fiddle

<强> HTML ：

<table>
    <th id="row-1">
        <p>Company</p>
        <span>Name</span> 
        <img id="image1" src="http://i.imgur.com/wO5gsMy.png"
             title="Sort by Company Name" alt="Sort by Company Name"
             width="25" height="25"/>
    </th>
</table>

<强>的JavaScript ：

var value = 0;
$("#row-1").click(function(){
    value = value ? 0: 180
    $("#image1").rotate({ animateTo:value});
});

JAvascript 180到-180旋转

4 个答案:

Working Demo in Fiddle