先看效果

先进入页面

当鼠标停留在中间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. 1、python--第一天练习题

    #1.使用while循环输入 1 2 3 4 5 6 8 9 10 k = 0 while k < 10: k += 1 if k == 7: continue print(k) #2.求1-1 ...

  2. web开发下载文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用.此控件PC全平台支持包括mac,linux系统的文件上传,文章末尾将附上控件下载与教程链接 ...

  3. learning express step(十四)

    learning express error handle code: const express = require('express'); const app = express(); const ...

  4. linux中fork--子进程是从哪里开始运行

    转自  http://blog.csdn.net/koches/article/details/7787468 fork调用的一个奇妙之处就是它仅仅被调用一次,却能够返回两次,它可能有三种不同的返回值 ...

  5. 从 s 点到 t 点的最短路（简单模板）(迪杰斯特拉）

    迪杰斯特拉简单版 #include <bits/stdc++.h> using namespace std; int m,n; const int inf = 0x3f3f3f3f; in ...

  6. Eclipse的快捷键设置及使用

    Eclipse快捷键的设置和使用 java程序开发,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧, 可以在平常开发中节约出很多时间提高工作效率,下面 ...

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

    昨天虽然将页面成功的搭建出来 但是其中的增删改查功能没有实现,需要到逻辑页面,即js页面注册一下 效果如下图

  8. Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

    v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: 1 import 'viewerjs/dist ...

  9. Linux下expdp自动备份

    创建sh脚本 [oracle@localhost backup]$ vi logicbackup.sh 添加脚本内容 #!/bin/sh # ############################# ...

  10. JS判断与过滤的表情符号表情的方法

    一.js判断文本中是否有表情符号表情 isEmojiCharacter(substring){ for ( var i = 0; i <substring.length; i ++){ var ...