先看效果

先进入页面

当鼠标停留在中间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. javascript---操作节点

    快捷键:jiedian(节点) 节点增删改appendChild() insertBefore() replaceNode() <!DOCTYPE html><html lang=& ...

  2. JQuery 实践--扩展JQuery

    Why扩展JQuery通过扩展可以利用JQuery所提供的现有代码基础.避免从头编写代码 有效扩展JQuery的规则扩展JQuery的两种形式: $上直接定义实用工具函数 和JQuery包装集进行操作 ...

  3. 【深入学习Redis】Redis内存模型

    前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分. 我们使用Redis时,会接触Redis的5种对象类型(字符串 ...

  4. linux认识

    linux基础 根目录 文档扩展名 在Linux中,跟windows的扩展名.exe .bat.dll不同,只要在那十个字符中有x权限,这个档案就是可执行的, 但是,可被执行和执行成功是两回事,在Li ...

  5. Gradle 如何配置将编译的 JAR 发布到 Archiva 中

    有时候我们希望将我们的jar 开发包发布到 Archiva 中. 如何配置 Gradle 的编译脚本呢? 首先你需要启用 Gradle 的 Maven-publish 插件. plugins { id ...

  6. [Luogu] U18202 洞穴遇险

    https://www.luogu.org/problemnew/show/U18202 暴力搜索预期得分3030分左右. 状压预期得分7070分左右. 考虑费用流,将剩余不稳定度和最小转为消除不稳定 ...

  7. 2018 Nowcoder Multi-University Training Contest 1

    Practice Link J. Different Integers 题意: 给出\(n\)个数,每次询问\((l_i, r_i)\),表示\(a_1, \cdots, a_i, a_j, \cdo ...

  8. Driver对 （一对两对的对）：specific/mini VS general

    老是听说miniport,port,在这里算是搞清楚了.mini就是specific(特殊)的意思.在微软的驱动层次里面,最底层的一般都是比较特殊的,但是为了满足系统的可拓展.可维护.通用等要求,微软 ...

  9. jumpserver官方手动安装

    测试环境 CPU: 64位双核处理器 内存: 4G DDR3 数据库:mysql 版本大于等于 5.6 mariadb 版本大于等于 5.5.6 环境 系统: CentOS 7 IP: 192.168 ...

  10. 使用harborv1.8.0-rc1　搭建docker私有镜像仓库

    概述 搭建一个私有仓库 harbor介绍 harbor是一个开源的docker容器仓库,由下面几个组件组成 + proxy:用来接收docker客户端和浏览器端的请求,并且把请求转发给后端的服务 + ...