JS 画框操作

      Js中，我们有时候需要对图片进行操作，包括画框，其实对于UI前端来说挺简单的，没有网上说的那样复杂，这里说明一下

    <div style="width:80%;height:300px;position:relative"><img src="img/10.jpg" /><span style="position: absolute;border:2px solid red;"></span></div><p></p><input type="text" id="btnTop"/><input type="text" id="btnLeft" /><input type="text" id="btnWidth" /><input type="text" id="btnHeight" /><input type="button" id="btn" value="画框"/>

其实就是div 设置相对定位，里面放一个img 和 span标签，其中 span为绝对定位，然后给span元素 添加 top、left、width、height 值即可

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script>$(function () {$("input[type=text]").width(50).height(18);$("#btn").click(function () {
 //取值var top = $("#btnTop").val();var left = $("#btnLeft").val();var wid = $("#btnWidth").val();var hig = $("#btnHeight").val();

                //赋值$("span").width(wid).height(hig); $("span").css({'top':top+"px",'left':left+"px"});});});</script>

最后效果图如下：

如是而已