Question

当我点击它时，如何使图像旋转，每次点击它时，它的旋转速度都会增加。

Answer 1

试试这个：

$("body").on("click", "#buttonId", function () {
    $(".north, canvas").rotate(90);
});

Answer 2

您可以使用css transform属性转换html元素。使用jquery旋转您可以编写一个方法，将transofrm属性添加到具有相应角度的元素。

$.fn.rotate = function(deg){ deg = deg+"deg"; $(this).css("transform","rotate(deg)"); }

Answer 3

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>

ADDED：JAVERY版本的JAVASCRIPT代码：

<!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>

快速实施。我希望它有所帮助。

Answer 4

string csv_file_path = @"C:\Sample files\L.csv";

JavaScript / JQuery使用速度和度

4 个答案: