垂直或水平调整 div 大小

2024-03-03

如何在不使用 css 属性的情况下调整 div 垂直或水平大小,仅使用纯 javascript 代码从高度或宽度调整大小?


HTML

<div id="container">
<div id="top-panel"> This is the top side's content! </div>
<div id="bottom-panel">
  <div id="drag"></div> 
  bottom content!</div>

脚本语言

var isResizing = false,
lastDownX = 0;

$(function () {
var container = $('#container'),
    top = $('#top-panel'),
    bottom = $('#bottom-panel'),
    handle = $('#drag');


document.addEventListener("mousedown", function(e){
isResizing = true;
    lastDownX = e.clientY;
});
document.addEventListener("mousemove", function(e){

    // we don't want to do anything if we aren't resizing.
    if (!isResizing) 
        return;
    console.log("e.clientY ", e.clientY, container.offset().top)
    var offsetRight = container.height() - (e.clientY - container.offset().top);

    top.css('bottom', offsetRight);
    bottom.css('height', offsetRight);
}); document.addEventListener("mouseup", function(e){
    // stop resizing
    isResizing = false;
});

}); 垂直调整 div 大小 http://jsfiddle.net/T4St6/2156/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

垂直或水平调整 div 大小 的相关文章

  • 为什么 jQuery 的 .change() 事件仅在单击鼠标右键时触发?

    我在使用 jquery 时遇到了问题 change 当我修改输入元素时发生事件 据说 每当我对所述元素进行实时更改时 该事件就会触发 但就我而言 它仅在我按下右键单击按钮后才会触发 这是我的代码laravel框架 HTML div clas
  • 如何将身份验证详细信息传递给 iframe 内的应用程序?

    我有一个网页 想在其中显示詹金斯的网页 因此使用iframe like But http xxx xxx xx xx 8080 view Nightly 20Builds 20 打开登录页面 因此无法直接显示内容 其实我想在没有登录的情况下
  • 跳过测试文件 Jest 中的一项测试

    我正在使用 Jest 框架并有一个测试套件 我想关闭 跳过其中一项测试 谷歌搜索文档没有给我答案 您知道答案或需要检查的信息来源吗 我在这里找到了答案 https devhints io jest https devhints io jes
  • 如何在 django 表单中设置自定义 HTML 属性?

    我有一个 Django 表单 它是页面的一部分 假设我有一个字段 search input forms CharField u Search word required False 我只能通过模板访问它 form search input
  • onbeforeunload 或单击浏览器后退按钮需要帮助

    如果用户单击浏览器的后退按钮 那么我希望出现提示并要求确认 如果用户单击 确定 那么它应该导航到xx html 如果用户单击 取消 则应阻止导航 我怎样才能做到这一点 注意 我已经尝试过onbeforeunload方法 但它适用于所有导航操
  • 将 Blob 设置为 iframe 的“src”

    以下代码在 Chrome 中完美运行 但它不适用于 IE 有人可以告诉我这里出了什么问题吗 iframe src 也设置为 blob 如下所示
  • 无法在 .js 文件内命中断点

    我升级到 win 8 现在我在管理员权限下运行 VS 2012 并在 MVC 4 中创建一个网站 我在线检查了不同的解决方案 但没有一个有效 我的解决方案中有一个 javascript 文件 但是当我在其中放置断点时 在运行时我看到 没有为
  • 重写node.js中其他模块中的函数

    我正在尝试在 Node js 应用程序中使用 nodeunit 存根函数 这是我正在尝试做的事情的简化版本 In lib file js var request require request var myFunc function inp
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index
  • 使用 Javascript 编辑和保存用户 HTML - 安全性如何?

    例如我有一个Javascript 支持的表单创建工具 您可以使用链接添加元素的 html 块 如输入字段 并使用 TinyMCE 来编辑文本 这些是通过自动保存功能保存的 该功能在特定事件的后台执行 AJAX 调用 被调用的保存函数负责数据
  • 在CSS中重置Margins/Padding时使用*是错误的吗?

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现
  • 电子邮件通讯未正确呈现

    我是 CSS 和 HTML 新手 我有一个包含 HTML 和 CSS 代码的电子邮件模板 我在新闻通讯模板的右上角放置了一个粉色圆圈框 http www pedersenshotell se newsletter http www pede
  • 使用 JavaScript 自动提交表单

  • Javascript:如何过滤对象数组并对结果求和

    我有一个对象数组 var example a 1 b 2 c 3 a 4 b 5 c 6 a 7 b 8 c 9 我正在尝试添加所有不对应的值c 我已经设法用 console log test filter x gt x c gt 3 过滤
  • 使用 JSON 传递 HTML

    我正在使用 JSON 将数据传递到 iPhone 和 iPad 数据的一个字段是 HTML 问题是编码 这是我得到的回复 gt GadgetHTML strong Hello strong gt from Catworld br n img
  • 有没有办法避开 Google 路线中的特定道路或坐标?

    API 有一个航路点参数 以便 API 计算经过指定航路点的路线 有什么方法可以给出要避开的航路点而不是要经过的航路点 它 目前 尚未实施 有一个开放的功能请求 问题 214 影响方向的能力 例如 避免 路障 https code goog
  • HTML 和 CSS 的基本编码标准 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道它们是否是像 PSR 01 这样的 HTML 和 CSS 基本编码标准 我尝试谷歌搜索和搜索 但没有找到 我建议看看类似的东西
  • 在不调用“then”的情况下解决 Promise

    我有这段代码 它是我为一个名为 Poolio 的 NPM 模块编写的小型 API 的一部分 对于那些支持错误优先回调和承诺的人来说 我遇到的问题似乎是一个常见问题 我们如何在支持两者的同时保持一致的 API 和 API 的一致返回值 例如
  • axios在自调用函数内部只调用一次(Internet Explorer)

    我有一个函数每 2 5 秒调用自己一次来检查后台运行的任务 它调用 axiosget如果响应错误 则返回一个 url 如果响应成功 我将停止该函数 这在 Chrome 和 Mozilla 上完美运行 但由于某种原因 它在 IE 版本 11

随机推荐