Odyniec imgAreaSelect插件无效:(

时间:2013-12-11 08:40:32

标签: javascript jquery css css3

我正在使用 http://odyniec.net/projects/imgareaselect/

的图片区域选择插件

我尝试在他们的网站上制作演示,但无法使其正常工作:(请帮助。

http://jsfiddle.net/PdYB7/

$(document).ready(function () {
  $('#bee').imgAreaSelect({ aspectRatio: '4:3', handles: true });
});

1 个答案:

答案 0 :(得分:2)

您需要添加css代码才能正常工作。他们有一个css表,你可以包括,你可以在他们的网站上下载

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

DEMO

/*
 * imgAreaSelect animated border style
 */

.imgareaselect-border1 {
    background: url(border-anim-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(border-anim-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(border-anim-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(border-anim-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-outer {
    background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-selection {
}