2

我是 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>
4

3 回答 3

2

您似乎缺少必须从http://odyniec.net/projects/imgareaselect/下载的插件本身

jQuery 只是核心，不包含图像区域选择方法

加载插件后，您将能够使用$('#ladybug_ant').imgAreaSelect({ .. });

这是一个例子http://jsfiddle.net/8TwRJ/

于 2013-12-12T09:13:02.900 回答
0

我也面临这个问题。我对Css和Bingo进行了一些更改，它已解决。实际上，父 div 位置应该是相对的，以使 imagearea 可滚动。

您必须定义“父级：”imgParentDivID“”并设置位置：该 div 的相对位置。它将完美地工作。

代码：

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

我希望这能帮到您。

于 2014-02-28T05:55:21.023 回答
0

您已为 css 链接使用脚本标记。也使用“链接”标签而不是“脚本”标签，即使用

<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>

这将在没有任何进一步更改的情况下解决问题。

于 2019-01-24T12:55:22.020 回答