先看效果

先进入页面

当鼠标停留在中间div时，鼠标变成双箭头

点击拖拉

往右边拉

往最左边拉

代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <!--<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>-->

     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

     <title>

         RunJS 演示代码

     </title>

     <style>

         /*设置所有的厚度和元素间为0*/

         * {

             margin: 0;

             padding: 0;

         }

         /*设置页面背景颜色*/

         body {

             background-color: #af4040;

         }

         /*设置所有div绝对定位且左浮动，高度为500px*/

         div {

             position: absolute;

             float: left;

             height: 500px;

         }

         /*设置左边div背景颜色、宽度为200px、左边距离窗口为0*/

         div.left {

             background-color: #B2B2B2;

             width: 200px;

             left: 0px;

         }

         /*设置右边div背景颜色、宽度200px、右边距离窗口为205px、右浮动*/

         div.right {

             background-color: #00B83F;

             width: 200px;

             right: 205px;

             float: right;

         }

         /*设置中间div宽度5px、鼠标为左右两个箭头、背景颜色、元素的堆叠顺序为[后来者居上的准则]、左边距离窗口200px*/

         div.center {

             width: 5px;

             cursor: col-resize;

             background-color: #FFB951;

             z-index: 1;

             left: 200px;

         }

     </style>

     <script>

         $(function () {

             // 分别是：当前窗口、左边div、中间div、右边div

             var doc = $(document), dl = $("div.left"), dc = $("div.center"), dr = $("div.right");

             // 三个div宽度的总和

             var sum = dl.width() + dr.width() + dc.width();

             // 中间div拖动鼠标事件

             dc.mousedown(function (e) {

                 // 把当前中间div的dom对象转为jquery对象

                 // var me = $(this);

                 // e.clientX当前鼠标的x轴长度，me.css("left")中间div距离左边长度，me.prop("clientLeft")中间div距离左边div长度

                 var deltaX = e.clientX - (parseFloat(dc.css("left")) || parseFloat(dc.prop("border-left")));

                 // deltaX表示记录鼠标点击时，距离中间div左边的距离，取值范围不会超过中间div的宽度

                 // 鼠标移动事件

                 doc.mousemove(function (e) {

                     // lt表示鼠标移动时，中间div左边距离左边窗口的长度

                     var lt = e.clientX - deltaX;

                     // 这里表示，当中间div左边距离左边窗口的长度小于等于0时就等于0，就是保证不小于0

                     lt = lt < 0 ? 0 : lt;

                     // 这里表示，当中间div左边距离左边窗口的长度大于左边div加中间div长度时就等于左边div加中间div长度，就是保证不大于左边div加中间div的长度

                     lt = lt > sum - dc.width() ? sum - dc.width() : lt;

                     // 设置中间div左边的宽度，也就是等于当前鼠标的x轴

                     dc.css("left", lt + "px");

                     // 设置左边div的宽度

                     dl.width(lt);

                     // 设置右边div的宽度

                     dr.width(sum - lt - dc.width());

                 });

             });

             // 鼠标松开后删除鼠标移动事件

             doc.mouseup(function () {

                 doc.unbind("mousemove");

             });

             // 当鼠标点击移动开始不选中div里的内容

             doc[0].onselectstart = function () {

                 return false;

             };

         });

     </script>

 </head>

 <body>

 <div class="left">

     这是左边的div

 </div>

 <div class="center">

     这是中间的div

 </div>

 <div class="right">

     这是右边的div

 </div>

 </body>

 </html>

鼠标拖拉div宽度的更多相关文章

  1. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  2. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  3. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  4. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

  5. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  6. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  7. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  8. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  9. CSS鼠标悬浮DIV后显示DIV外的按钮

    昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...

随机推荐

  1. Python--编码的疑惑

    XML语法分析器在处理的时候,使用的是Unicode字符串,并且将其返回.Unicode可以处理特殊字符,但是如果将Unicode字符串转换为普通字符串,就会引发异常,比如Print, >> ...

  2. 【安卓基础】使用Guideline与约束辅助布局的平分空间设计

    ConstraintLayout布局已经推出了很长一段时间,功能也是比较强大,能有效减少界面的视图层级嵌套,一定程度提升界面绘制效率. 在项目中,我也是最近才选择开始使用ConstraintLayou ...

  3. P4118 [Ynoi2016]炸脖龙I

    思路:扩展欧拉定理 提交:\(\geq5\)次 错因:快速幂时刚开始没有判断\(a\)是否大于\(p\) 题解: 用树状数组维护差分,查询时暴力从左端点的第一个数向右端点递归,若递归时发现指数变为\( ...

  4. git 从某一版本拉取新分支，并在新分支合并某几个commit

    场景:需要回退至红框中的那个版本,并且只添加“缓存逻辑优化,增加加载中的状态”这一次commit,其他的commit不添加. 步骤: 1) 切换到指定分支 dev git checkout dev 2 ...

  5. Shell 01 shell概述

    1.查看shells:/etc/shells /bin/sh /bin/bash /sbin/nologin /usr/bin/sh /usr/bin/bash /usr/sbin/nologin / ...

  6. 通过zabbix来监控树莓派

    安装zabbix-agent(4.0版本) 配置zabbix-agent(使用主动模式) 使用zabbix-sender(主动推送自定义数据) 以下 执行命令和相关配置文件: wget https:/ ...

  7. 微信小程序之简单记账本开发记录（三）

    昨天已经编辑了主界面,在wxml文件中设置好跳转链接之后,就可以进行下一步的开发了 在pages中建立一个新的页面文件夹作为之后的支出页面 编辑后台,今天先搭建大致界面

  8. springboot中web应用的统一异常处理

    在web应用中,请求处理过程中发生异常是非常常见的情况.springboot为我们提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来展示异 ...

  9. 理解了这些异常现象才敢说真正懂了TCP协议

    很多人总觉得学习TCP/IP协议没什么用,觉得日常编程开发只需要知道socket接口怎么用就可以了.如果大家定位过线上问题就会知道,实际上并非如此.如果应用在局域网内,且设备一切正常的情况下可能确实如 ...

  10. Ubuntu下Nginx的安装和卸载

    环境是Ubuntu 16.04 安装: sudo apt-get update sudo apt-get install nginx 卸载: sudo apt-get --purge remove n ...