jquery旋轉圖像onclick

我想實現這個（90度旋轉），但它失敗沒有錯誤。此圖像位於<a></a>標記內，它已經具有切換jquery功能。jquery旋轉圖像onclick

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

來源

2013-01-16 Art Planteur

你需要一個用於輪換的插件，你知道嗎？並且不會向我們展示服務器端代碼，生成的html就足夠了。 – mpm

您正在使用[this]（http://www.zachstronaut.com/posts/2009/08/07/） jquery-animate-css-rotate-scale.html）patch？ – bitWorking

不，我認爲這是包括ded in jquery：s 我會檢查這一點，謝謝 –

考慮一個jQuery的擴展名，例如：jQueryRotate

這會讓裏面的旋轉的onclick更容易和更具可讀性。

來源

2013-01-16 18:48:11 SMASH

謝謝，它的工作原理。圖片只旋轉一次：'onclick ='$（this）.rotate（180）;'' –

這是一個評論還是一個問題？ – SMASH

這是一個問題... –

結帳這樣的：JqueryRotate

這沒有什麼事情做，你可以看到圖像本身的一個代碼示例。

enter image description here

所以你的情況，你可以這樣做：

$(document).ready(function(){ 
    $('img[src^="down_arrow"]').click(function(){ 
     $(this).rotate(90); 
    }); 
});

來源

2013-01-16 18:51:09 Jai

爲什麼我的代碼只能運行一次？ 'onclick ='$（this）。旋轉（180）;'' 圖像旋轉，但如果我再次點擊，它doest –

@ArtPlanteur可能因爲你已經旋轉180度。 – MiniRagnarok

那麼你將如何保存旋轉的圖像呢？ – Mightee

根據您需要支持的瀏覽器版本，你可以嘗試CSS tranforms。

首先，定義CSS類是這樣的：

.rotated { 
    transform: rotate(90deg); 
    -ms-transform: rotate(90deg); /* IE 9 */ 
    -moz-transform: rotate(90deg); /* Firefox */ 
    -webkit-transform: rotate(90deg); /* Safari and Chrome */ 
    -o-transform: rotate(90deg); /* Opera */ 
}

然後你就可以使用jQuery點擊鏈接時要添加的類別：

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />

來源

2013-01-16 18:55:07

我沒那麼想，謝謝。 –

當我們簡單地知道什麼時候通過jquery添加一個類或一個元素到一個元素的時候，我們可以完成多少事情，這簡直太神奇了 – blackhawk

這樣只會工作一次？ –

使用的CSS規則的組合-webkit-transform和-moz-transform上的圖片click.For例如旋轉90度的圖像適用以下CSS規則點擊

$('img').click(function(){ 
    $(this).css({ 
     "-webkit-transform": "rotate(90deg)", 
     "-moz-transform": "rotate(90deg)", 
     "transform": "rotate(90deg)" /* For modern browsers(CSS3) */ 
    }); 
});

來源

2013-01-16 18:59:33

這將使您能夠執行每個clik的額外旋轉

var degrees = 0; 。 $（ 'IMG'）點擊（函數rotateMe（E）{

degrees += 90; 

//$('.img').addClass('rotated'); // for one time rotation 

$('.img').css({ 

    'transform': 'rotate(' + degrees + 'deg)', 
    '-ms-transform': 'rotate(' + degrees + 'deg)', 
    '-moz-transform': 'rotate(' + degrees + 'deg)', 
    '-webkit-transform': 'rotate(' + degrees + 'deg)', 
    '-o-transform': 'rotate(' + degrees + 'deg)' 
});

https://jsfiddle.net/Lnckq5om/1/

來源

2017-07-28 20:49:54 Rossitten

精彩的解決方案。遵循jsfiddle很清楚要做什麼。在我的情況下，這正是醫生訂購的。非常感謝！ – MZA

這是旋轉圖像90度的波紋管下面的代碼示例：

$(document).ready(function(){ 
    $("img").click(function(){ 
     $(this).rotate(90); 
    }); 
});

來源

2017-09-13 07:02:35

jquery旋轉圖像onclick

回答

相關問題