每次點擊時旋轉圖像jQuery

我想每次點擊它時旋轉一個圖像..我已經創建了一個函數來做到這一點，但圖像只是第一次點擊它時旋轉......此外，一旦圖像旋轉它會自動改變寬度和高度。我怎樣才能保持每次相同的寬度和高度？每次點擊時旋轉圖像jQuery

這是函數：

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

來源

2016-04-29 AlexGH

哪裏'.rotate（）'從何而來？它不是標準的jQuery庫的一部分 –

我已經使用過這個庫：https://code.google.com/archive/p/jquery-rotate/downloads – AlexGH

爲什麼插件時你可以用'css'屬性來實現'jquery'？ –

這可以很容易地通過使用JavaScript的只是來完成，例如工作會是這樣

<div id="imgWrapper"> 
    <img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)"> 
</div> 

<script> 
    var delta =0; 
    function rotateBy10Deg(ele){ 
     ele.style.webkitTransform="rotate("+delta+"deg)"; 
     delta+=10; 
    } 
</script>

來源

2016-04-29 04:51:52 viveksinghggits

插件轉換img成canvas，這就是點擊不是第二次工作的原因。改變你的jQuery或參閱本demo

$(document).ready(function() { 
    $("img").click(function() { 
    $(this).rotate(45); 
    }); 
    $('body').on('click', 'canvas', function() { 
    $(this).rotate(45); 
    }); 
});

來源

2016-04-29 04:26:06 Pugazh

我做到了，如你所說，我用CSS中的JQuery：

CSS：

.rotate:active { 
transform: rotate(180deg) 
}

JQuery的：

$(document).ready(function() { 
     $("img").click(function() { 
//forcing img to rotate every time on click() 
      if ($(this).css("transform")=='none') { 
       $(this).css("transform", "rotate(180deg)"); 
      } 
      else { 
       $(this).css("transform","") 
      } 
     }) 
    })

來源

2016-04-29 04:28:22 AlexGH

我將度數改爲180而不是45，因爲我意識到這對於我想要做的更好。 – AlexGH

我建議在你的CSS文件中設置max-height和max-width。這將確保圖像不會超過一定的尺寸。

來源

2016-04-29 04:31:30

此鏈接可能會幫助你：

Rotate image with onclick

在情況下的鏈接直接送你不想點擊：

javascipt的

var rotate_factor = 0; 

function rotateMe(e) { 
    rotate_factor += 1; 
    var rotate_angle = (180 * rotate_factor) % 360; 
    $(e).rotate({angle:rotate_angle}); 
}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

來源

2016-04-29 04:32:57

我認爲角度（45度）是參照其初始角度爲0來計算的。一旦圖像處於45度，只有在角度改變（例如90度）時纔會旋轉。所以，下面的代碼可能工作

$(document).ready(function() { 
var angle = 0; 
$("img").click(function() { 
     angle = angle+45; 
    $(this).rotate(angle); 
}) 
})

來源

2016-04-29 04:38:34 Nabil

每次點擊時旋轉圖像jQuery

回答

相關問題