按钮单击时旋转图像

时间:2013-08-28 05:18:00

标签: javascript jquery html

爵士

在我的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>

但在这里轮换没有发生。

请有人指导我。提前谢谢。

1 个答案:

答案 0 :(得分:3)

您可以转到 DEMO

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

我相信这有助于做你想做的事。祝你好运