1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<form action="" id="img熠硒勘唏form"><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>
4、书写css代码。<style>* { padding: 0; margin: 0 }.top-tab { background-color: #333; padding: 10px; margin-bottom: 50px }.top-tab a { display: flex; align-items: center; color: #fff }#imgform { margin: 0 auto; width: 500px }</style>
5、书写并添加js代码。<script src="scripts/jquery.js"></script><script src="scripts/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>
6、代码整体结构。
7、查看效果。
