Question

我正在尝试创建我认为应该非常简单的东西..我有一个带有背景图像的静态固定div，我想在其上拖动和调整其他图像的大小。

我所拥有的东西似乎根本不起作用。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".image").resizable({aspectRatio:true}).parent().draggable();
});
</script>
<style>
#container {
  width: 640px;
  height: 480px;
  border: solid 1px #000;
  margin: 0 auto;
  background-image:url('background.png');
}
</style>
</head>
<body>

<div id="container"></div>

<img class="image" src="example.png">
<img class="image" src="example1.png">
<img class="image" src="example2.png">

</body>
</html>

有人可以解释一下我做错了吗？

Answer 1

尝试

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/
themes/smoothness/jquery-ui.css" />

页面http://jqueryui.com/resizable上给出的

现在可以在firefox中使用。

在Chrome中，图像越来越缩小，这就是为什么它们是隐形的尝试

.image{width:200px;height:200px;}

在你的CSS中

jQuery Image VAMP（拖动并调整大小）

1 个答案: