我正在玩 jquery.rotate.js我想每次都将图像旋转到下一个旋转度数。
我包含了以下 jquery 库:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='jquery.rotate.1-1.js'></script>
jQuery 代码:
$(window).load(function() {
$("body").on("click", "#button", function() {
$(".north").rotate(a());
});
nextAngle = 0;
function a() {
nextAngle += 90;
if (nextAngle >= 360) nextAngle = 0;
return nextAngle;
}
});
HTML代码:
<img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg">
<input type="button" id="button" value="Rotate me">
我的 JSFiddle:Sample
在我当前的代码中,图像只旋转一次,但我想在每次按钮单击事件时重新旋转图像。 jQuery.rotate.js
如何实现?
我想要像这样序列的图像旋转:
有什么想法吗?
谢谢。
最佳答案
在 Jquery 中进行如下更改将适用于您:
$("body").on("click", "#button", function () {
$(".north, canvas").rotate(getNextAngle());
});
因为点击旋转你的图像被转换为 Canvas 。
检查 Fiddle
编辑:
如下更改 JQuery 以获得您在问题图片中提到的所需输出。
$("body").on("click", "#button", function () {
$(".north, canvas").rotate(90);
});
关于jquery - 如何在按钮单击事件中将图像旋转到下一个 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30395285/