jquery – 如何在按钮点击事件中将图像旋转到下一个度数？

2019年8月6日 148次阅读

我正在玩
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());
});

因为单击旋转,您的图像将转换为画布.

检查Fiddle

编辑：

如下所示更改JQuery,以获得您在问题图像中提到的所需输出.

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

Updated Fiddle

点赞