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