先看效果

先进入页面

当鼠标停留在中间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. js查找

    //对象克隆 function main_clone(fromObject, toObject) { var copy = toObject || {}; for (var i in fromObje ...

  2. Jenkins 自动化构建

    def pipeId = 1130561944231279390 def pipeLogId def isTagOrBranch def tagOrBranch def imageId def add ...

  3. P2215 [HAOI2007]上升序列 DP

    这个字典序海星 思路:\(DP\) 提交:4次 错因:刚开始把字典序理解错了,怒看题解一脸懵逼:后来往前跳的时候又没有管上升\(QwQ\)窝太菜了. 题解: 所谓的字典序是相对位置!!!而不是元素本身 ...

  4. 【题解】Image Perimeters-C++

    题目Description给出一张由"x"和".“组成的矩阵.每个"x"可以向上下左右及两个斜对角进行连通,请问由某个点开始的"x”,它所连 ...

  5. package.json设置环境变量

    有三种方法可以在package.json设置环境变量 npm install --save-dev cross-env { "scripts": { "dev1" ...

  6. [Luogu] 子共七

    https://www.luogu.org/problemnew/show/P3131 A表示前缀和数组 A[r] - A[l - 1] = 0 (mod 7) 得 A[r] = A[l - 1] ( ...

  7. Machine Schedule为什么UVA过了POJ过不了

    UVA1194 POJ1325 POJ要多判一个非零!!! #include<cstdio> #include<vector> #include<cstring> ...

  8. 数据结构实验之数组二：稀疏矩阵（SDUT 3348）

    Problem Description 对于一个n*n的稀疏矩阵M(1 <= n <= 1000),采用三元组顺序表存储表示,查找从键盘输入的某个非零数据是否在稀疏矩阵中,如果存在则输出O ...

  9. 六、grep与正则表达式 （文本过滤）

    一.正则表达式 正则表达式:Regual Expression, REGEXP.由一类特殊字符及文本字符所编写的模式,其中有些字符不表示其字面意义,而是用于表示控制或通配的功能:基本正则表达式:BRE ...

  10. Spring Boot 中 Druid 的监控页面配置

    Druid的性能相比HikariCp等其他数据库连接池有一定的差距,但是数据库的相关属性的监控,别的连接池可能还追不上,如图: 今天写一下 Spring Boot 中监控页面的配置,我是直接将seat ...