html中图像的旋转和拖动

Rotation and Dragging of an image in html

本文关键字：拖动 旋转 图像 html      更新时间：2023-09-26

Sir，

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

但在这里，轮换并没有发生。

有人能给我指路吗。提前谢谢。

我在您的代码中没有看到任何错误。我把一把工作小提琴和这个放在一起
这是一个工作小提琴

$(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);
        });
    });

您的html代码或您没有向我们展示的东西一定有一些问题。下面是一个工作小提琴，它可以做您期望代码做的事情。

工作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实例，因为它们会相互冲突。

相关文章：