zoukankan      html  css  js  c++  java
  • JS 画框操作

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

        <div style="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>

    最后效果图如下:

    如是而已

  • 相关阅读:
    为什么硬链接不能链接目录、文件inode 和目录 dentry 的区别联系
    LVM 详解
    pwd 命令详解
    type 命令详解
    查看文件中字符出现次数
    lesson
    xml linq
    新系统配置
    空合并运算符(??):
    dos.ORM配置和使用
  • 原文地址:https://www.cnblogs.com/Sientuo/p/10756487.html
Copyright © 2011-2022 走看看