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

我在代码中看不到任何错误。我已经包含了一个工作小提琴 Here is a working fiddle

$(function () {
        $('#image').draggable();
        $('#image1').draggable();
});

$(document).ready(function () {
        var angle = 0;
        $('#button1').on('click', function () {
            angle += 2;
            $("#image").rotate(angle);
        });
        $('#button2').on('click', function () {
            angle -= 2;
            $("#image").rotate(angle);
        });
    });

Answer 2

您的html代码或您未向我们展示的内容必定存在问题。下面是一个工作小提琴，它可以满足您的代码要求。

Working Fiddle

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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);
        });
        $('#Image1').draggable();
    });
</script>

避免加载两个单独的jQuery实例，因为它们会相互冲突。

在html中旋转和拖动图像

2 个答案: