JAvascript 180到-180旋转

现在，当用户点击这个图像时，它旋转180度。
我想更新它来做到这一点：如果用户点击图片，它会旋转180度，但如果用户再次点击图片，它会旋转回原来的位置。JAvascript 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>

来源

2013-11-04 Pixel Reaper

在相反方向上翻动-180是指：在相同的方向翻转180。所以再点击一下，它必须继续转向？试试看：顺时针旋转180度。 click2：逆时针方向-180度。它有什么作用？ – Timmetje

但它可能会转向错误的方向^^ – Julien

保持多大改变角度和否定它每次点击一个独立的变量：

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

来源

2013-11-04 15:25:23

谢谢！这是我需要的。 :)不知道为什么我有两个票倒过来。 @TedHopp –

@PixelReaper - 很高兴为您提供帮助。我也不知道降薪是什么。 –

两个变量可能有点不必要，因为你只是在0到180之间翻转（'value = value？0：180'） – JJJ

我会建议在设置时将您的值设置为-180，然后每次用户单击您时都会执行

value = value * -1;

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

来源

2013-11-04 15:26:56 Julien

嗯......碰巧+180和-180是一样的方向。该值需要在0和+180之间切换，而不是-180和+180。 –

我明白之后^^开始时，当我旋转180°时，需要旋转-180°才能回到原来的位置^^ – Julien

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

来源

2013-11-04 15:28:39 Regu

我知道这已经回答了，但我想在这里得到一个答案与小提琴。还有一个依赖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}); 
});

来源

2013-11-04 16:05:15 KyleMit

JAvascript 180到-180旋转

回答

相关问题