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>

最后效果图如下：

如是而已