JavaScript / JQuery使用速度和度數旋轉點擊圖像
[英]JavaScript/JQuery rotate an image on click using speed and degrees
問題描述
單擊圖像時，如何旋轉圖像；每次單擊圖像時，旋轉速度都應該增加。
4 個解決方案
解決方案1
0 2018-03-25 13:56:55
試試這個：
$("body").on("click", "#buttonId", function () {
$(".north, canvas").rotate(90);
});
解決方案2
0 2018-03-25 14:01:13
您可以使用css transform屬性轉換html元素。要通過jquery旋轉，您可以編寫一種方法，將transofrm屬性添加到具有相應角度的元素中。
$.fn.rotate = function(deg){ deg = deg+"deg"; $(this).css("transform","rotate(deg)"); }
解決方案3
0 2018-03-25 14:10:25
var theImage = document.getElementById("TheImage"); var degree = 0; var increment = 0; var firstClick = true; function rotateTheImage() { degree += increment; theImage.style.transform = "rotate(" + degree + "deg)"; } theImage.addEventListener("click", function() { if(firstClick) { setInterval(rotateTheImage, 100); firstClick = false; } increment++; }, false);
<!DOCTYPE html> <html> <head> <title>Rotate by Click</title> </head> <body> <svg id="TheImage" xmlns="http://www.w3.org/2000/svg" width="124" height="124"> <path fill="none" stroke="#000" stroke-width="5" d="m61,7a55,55 0 1,0 2,0zm1,0v110m39-16-78-78m78,0-78,78m-16-39h110"/> </svg> </body> </html>
添加：JAVASCRIPT代碼的JQUERY版本：
<!DOCTYPE html> <html> <head> <title>Rotate by Click</title> </head> <body> <svg id="TheImage" xmlns="http://www.w3.org/2000/svg" width="124" height="124"> <path fill="none" stroke="#000" stroke-width="5" d="m61,7a55,55 0 1,0 2,0zm1,0v110m39-16-78-78m78,0-78,78m-16-39h110"/> </svg> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script> var degree = 0; var increment = 0; var firstClick = true; function rotateTheImage() { degree += increment; $("#TheImage").css("transform", "rotate(" + degree + "deg)"); } $("#TheImage").click(function() { if(firstClick) { setInterval(rotateTheImage, 100); firstClick = false; } increment++; }); </script> </body> </html>
只是一個快速的實現。 希望對您有所幫助。
解決方案4
0 2018-03-25 14:22:46
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
#image{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
</style>
</head>
<body>
<img id="image" width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Facebook_icon.jpg">
<script>
$(function(){
var rotateByAngle = 90;
$("#image").click(function(){
rotateByAngle+= 90;
$(this).css({
"transform": "rotate(" + rotateByAngle + "deg)",
"-webkit-transform" : "rotate(" + rotateByAngle + "deg)"
})
});
});
</script>
</body>
</html>
使用帶有動畫的 jquery 在單擊時將圖像旋轉 180 度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.