javascript - 单击按钮时旋转图像

Question

先生，

在我的 HTML 页面中，有一个图像和两个用于顺时针和逆时针旋转该图像的按钮。而且我还需要使该图像可拖动。我有进行拖动和旋转的代码。

我使用以下 JavaScript 进行拖动:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $('#Image1').draggable();
        $('#WaterMark').draggable();
    });
</script>

我使用以下 JavaScript 进行旋转:

<script type="text/javascript"                 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var angle = 0;
    $('#btnRotCw').on('click', function () {
        angle += 2;
        $("#Image1").rotate(angle);
    });
    $('#btnRotAcw').on('click', function () {
        angle -= 2;
        $("#Image1").rotate(angle);
    });
});
</script>

但是这里没有发生旋转。

谁能指导我。提前致谢。

Answer 1

给你 DEMO

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});
$('#button1').on('click', function() {
    angle -= 90;
    $("#image").rotate(angle);
});

我相信这可以帮助您完成您想要的事情。祝你好运