投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 图片相册背景 / jquery.imageLabel自定义添加编辑图片标注特效
jquery.imageLabel自定义添加编辑图片标注特效
标签:

插件介绍

    这是一款非常好用的jquery.imageLabel自定义添加编辑图片标注文字插件,鼠标框选图片区域即可添加标注内容,在标注区域内点击鼠标右键可编辑或者删除标注,可添加多个文字标注,还可以随

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-05
    阅读:

jquery.imageLabel自定义添加编辑图片标注特效

简要教程

这是一款非常好用的jquery.imageLabel自定义添加编辑图片标注文字插件,鼠标框选图片区域即可添加标注内容,在标注区域内点击鼠标右键可编辑或者删除标注,可添加多个文字标注,还可以随意拖动标注框的位置。

使用方法

在页面引入以下jquery.js和jquery.imageLabel.min.js文件

<script src="js/jquery.js"></script>
<script src="js/jquery.imageLabel.min.js"></script>
<script>
$(function() {
$(".right-select-box");
$(".addpic").removeAttr("disabled"), $("#imgform").submit(function(t) {
  t.preventDefault();
  window.c = imageLabel({
      img: $("[name=src]").val(),
      editPop: !0,
      close: function(t) {
          return t.length && alert(JSON.stringify(t)), !0
      },
      clickArea: function() {},
      edit: function(t) {},
      startArea: function() {},
      confirm: function(t) {
          return t.length && alert(JSON.stringify(t)), !0
      }
  })
})
})
</script>

Html结构

在页面插入form代码部分

<form action="" id="imgform">
  <p>图片链接:</p>
  <input type="text" name="src" value="build.jpg" style="display:block;width:100%;height:30px">
  <button class="addpic" type="submit" disabled="disabled" style="margin-top:10px;padding:10px;width:100%">点击标注图片</button>
</form>