在jquery中选择ImgAreaSelect
ImgAreaSelect in jquery
我是jquery的新手。我在jquery中的任务是"ImgAreaSelect"我从早上就开始尝试,但没有达到目标。请查看我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
您似乎缺少了必须从中下载的插件本身http://odyniec.net/projects/imgareaselect/
jQuery只是核心,不包括图像区域选择方法
加载插件后,您将能够使用$('#ladybug_ant').imgAreaSelect({ .. });
这是一个例子http://jsfiddle.net/8TwRJ/
我也面临这个问题。我在Css和Bingo中做了一些更改,问题解决了。实际上,父div的位置应该是相对的,以使imagearea可以滚动。
您必须定义"parent:"imgParentDivID"并设置该div的position:relative。它将完美地工作。
代码:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
我希望这对你有帮助。
您已经为css链接使用了script标记。使用"链接"标签而不是"脚本"标签,即使用
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
而不是
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
这将在没有任何进一步更改的情况下解决问题。
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- d3基于用户选择动态更新节点
- 提交后保留下拉选择的值
- JQuery对动态创建的对象进行选择
- 无法在Ionic select中预先选择最后一个选项
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery自动完成阻止选择后聚焦
- 使用此选项选择父类内部的类
- jQuery最近父级的数据属性选择器
- 如何在Imgareaselect中选择图像根据像素进行选择
- 如何在新的分区中显示ImgAreaSelect选择的图像
- 在jquery中选择ImgAreaSelect