jQuery的圖像旋轉（旋轉使用插件）旋轉+/- 90度，每點擊

我使用這個jQuery插件：http://code.google.com/p/jqueryrotate/wiki/Documentation jQuery的圖像旋轉（旋轉使用插件）旋轉+/- 90度，每點擊

我有插件工作和一切，但是我希望能夠做的是點擊一個按鈕來旋轉圖像，每次點擊該按鈕時，它會連續旋轉+/- 90度，而不是一定程度上。我不太確定如何使用此插件完成此操作。

理想情況下，下面的代碼將做我想要的，但它不。

$("body").on("click", ".theater-wrapper img", function(){ 

    $(".theater-wrapper .current").rotate(+90); 

});

來源

2012-10-16 Dylan Cross

你確定它不應該僅僅是'$（「劇場包裝.current。」）旋轉（90）;' –

好，無論哪種方式，它仍然沒有什麼插件是想做的，+90只是我看看是否會做我想做它，但它不，但它仍然有效 - 它旋轉到90度，但就是這樣。我想要它做的是第一次點擊旋轉到90度，然後第二次點擊它會去180度（+90度），然後到270,360,450等。 –

是這樣的嗎？

$("body").on("click", ".theater-wrapper img", function(){ 

    $(".theater-wrapper .current").rotate(getNextAngle()); 

}); 

nextAngle = 0; 
function getNextAngle() { 
    nextAngle += 90;  
    if(nextAngle >= 360) { 
     nextAngle = 0; 
    } 
    return nextAngle; 
}

也許不是什麼大不了的事，但要避免讓一個龐大的數字，你可以在需要的時候將值重置爲0。

來源

2012-10-16 02:58:33

這實際上是完美的，謝謝！現在我知道我沒有在我的問題中包括這個，但是你會碰巧知道是否有任何方法來改變圖像的DOM位置，所以當我在旋轉的圖像上使用jquery的height（）時，它會知道它現在旋轉了和位置是不同的。（我必須使用jquery來計算我的影院查看器的最大圖像高度/寬度。 –

使用完成時觸發的插件回調函數重新計算並設置新的位置。 – Throttlehead

即使這樣做它不起作用 –

我沒有看過插件，但我假設它所做的是使用跨瀏覽器支持的CSS3轉換旋轉。它總是需要一個特定的角度，所以你將不得不用某種變量跟蹤你當前的角度。一個好的解決方案可能是每次點擊後增加的HTML5數據標記，特別是如果您想在DOM中使用多個旋轉圖像時。所以說你的HTML是這樣的：

<div class='image_wrap'> 
    <img class='image_to_rotate' /> 
    <div class='rotate_btn' data-rotate='0'></div> 
</div>

所以，當用戶點擊旋轉按鈕，它會抓住這個變量，並通過90增加它，然後存儲在同一個地方的新值，因此它已經準備好增加它在下一次點擊。你的jQuery可能看起來像這樣：

$('.rotate_btn').click(function(){ 
    //Grab the current set angle 
    var angle = parseInt($(this).data('rotate')) + 90; 

    //Rotate the image 
    $(this).siblings('.image_to_rotate').rotate(angle); 

    //Store new angle for next increment 
    $(this).data('rotate', angle); 
})

這沒有測試，但你應該有足夠的錢去這裏。如果您需要進一步的指導，請查看.data上的jQuery文檔。

來源

2012-10-16 03:10:23 Throttlehead

啊，他打敗了我，考慮一個基於類的方法與數據屬性，如果你需要多個實例，如你的JavaScript可能會混亂。並且包括一些在270之後重置爲零的邏輯是一個好主意。如果您想要左右旋轉btns，則需要更多邏輯。 – Throttlehead

工作演示http://jsfiddle.net/jKYkT/

點擊+和-按鈕角度旋轉

希望這符合事業:)

代碼

newangle = 0; 

$('input').click(function() { 
    if ($(this).attr('class') == "minus") 
     operation = "-"; 
    else 
     operation = "+"; 

    alert(operation) 
    var angle = next(operation); 
    $("#image").rotate(angle); 
}); 

function next(oper) { 
    if (oper == "+") 
     newangle += 90; 
    else 
     newangle -= 90; 

    if (newangle >= 360) newangle = 0; 

    return newangle; 

}

來源

2012-10-16 03:17:18

var rotation = 0; 
$("body").on("click", ".theater-wrapper img", function(){ 
    rotation +=90; 
    $(".theater-wrapper .current").rotate({ animateTo:rotation }); 
});

或

var rotation = 0; 
$("body").on("click", ".theater-wrapper img", function(){ 
    rotation +=90; 
    var rotation_angle_mod = rotation%360; 
    $(".theater-wrapper .current").rotate(rotation_angle_mod); 
});

來源

2014-09-12 11:29:36 Ramesh

jQuery的圖像旋轉（旋轉使用插件）旋轉+/- 90度，每點擊

回答

相關問題