先看效果

先进入页面

当鼠标停留在中间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. 017_STM32程序移植之_AS608指纹模块

    STM32程序移植之AS608指纹模块 BUG说明: 硬件接线图如图所示 STM32引脚 指纹模块引脚 功能 3.3V 3.3V PA3 Tx PA2 Rx GND GND PA1 WAK 3.3V ...

  2. Shell 07 项目案例

    案例1:编写一键部署软件脚本 案例2:启动脚本 案例3:编写监控脚本 案例4:编写安全检测脚本 案例5:编写进度显示脚本   一.编写一键部署软件脚本 #!/bin/bash N=$(yum repo ...

  3. Noip2001 提高组 T3

    T3 题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<=40),且每份中包 ...

  4. csps模拟73-74

    模拟73: T1:哔-------------------- sb模拟,然而一个小细节打炸了,不想解释(吐嘈大样例没有右移)... #include<iostream> #include& ...

  5. pojo、po、dto、dao、bo区别

    j2ee中,经常提到几种对象(object),理解他们的含义有助于我们更好的理解面向对象的设计思维.     POJO(plain old java object):普通的java对象,有别于特殊的j ...

  6. 关于pl/sql打开后database为空的问题解决办法

    前置条件:楼主是在虚拟机里面进行安装oracle和pl/sql的,所以我的安装后,发现我的pl/sql显示的database是空的,当然楼主会检查我的tnsnames.ora是不是配置正确了,但是检查 ...

  7. 64位linux下玩32位汇编编程

    利用下假期,打算把linux下的汇编语言给熟悉下,结果是以32位为版本的,只能在办公室的机器上跑了个opensuse的32位版本,家里的suse挂了,无法输入中文.打算再安装下32位系统,今天找到了个 ...

  8. 【零基础】风格迁移之deep-painterly-harmonization的安装和使用

    注:原项目名叫deep-painterly-harmonization,这里我缩写下称呼其为“DPH” 注:原项目GIT链接:https://github.com/luanfujun/deep-pai ...

  9. kotlin中this 表达式

    this表达式,可以表示当前函数的接收者,在类的成员函数中,this 指向这个类的当前对象实例,在扩展函数中或带有接收者数字面值,this代表调用函数时,在点号左侧传递的接收者参数 如果this没有限 ...

  10. git服务器搭建---便签做备注

    今天,简单搭建了一下git服务器.发现一篇文章写的挺好的 http://www.cnblogs.com/trying/archive/2012/06/28/2863758.html 并简单和廖雪峰的结 ...