1、实现效果：

2、代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

    <title> New Document </title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <style type="text/css">

        html, body, div {

            margin: 0;

            padding: 0;

            border: 0;

            -moz-user-select: none;

            -webkit-user-select: none;

        }

        .gf_s {

            float: left;

            width: 4px;

            cursor: e-resize;

            background-color: #fff;

            border: #99BBE8 1px solid;

        }

        .gf_s_g {

            float: left;

            width: 4px;

            display: none;

            cursor: e-resize;

            position: absolute;

            background-color: #F0F0F0;

            border: #99BBE8 1px solid;

            filter: alpha(opacity=60);

            -moz-opacity: 0.6;

            -khtml-opacity: 0.6;

            opacity: 0.6;

            z-index: 1000;

        }

    </style>

 </head>

 <body>

     <div id="divP" style="width:100%; height:100%;">

         <div id="divLeft" style="background-color: green; float: left; "></div>

         <div id="divS" class="gf_s" style="float: left;"></div>

         <div id="divSG" class="gf_s_g" style="float: left;"></div>

         <div id="divRight" style="background-color: blue; float: left;"></div>

     </div>

     <script type="text/javascript">

         var $sliderMoving = false;         

         //兼容各种浏览器的,获取鼠标真实位置

         function mousePosition(ev) {

             if (!ev) ev = window.event;

             if (ev.pageX || ev.pageY) {

                 return { x: ev.pageX, y: ev.pageY };

             }

             return {

                 x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,

                 y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop

             };

         };

         //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到

         function getElCoordinate(dom) {

             var t = dom.offsetTop;

             var l = dom.offsetLeft;

             dom = dom.offsetParent;

             while (dom) {

                 t += dom.offsetTop;

                 l += dom.offsetLeft;

                 dom = dom.offsetParent;

             };

             return { top: t, left: l };

         };

         //分隔条幽灵左右拖动(mousemove)

         function sliderGhostMoving(e) {

             $("#divSG").css({ left: mousePosition(e).x - 2, display: "block" });

         };

         //完成分隔条左右拖动(mouseup)

         function sliderHorizontalMove(e) {

             var lWidth = getElCoordinate($("#divSG")[0]).left - 2;

             var rWidth = $(window).width() - lWidth - 6;

             $("#divLeft").css("width", lWidth + "px");

             $("#divRight").css("width", rWidth + "px");

             $("#divSG").css("display", "none");

         };

         function reinitSize() {

             var width = $(window).width() - 6;

             var height = $(window).height();

             $("#divLeft").css({ height: height + "px", width: width * 0.75 + "px" });

             $("#divS").css({ height: height - 2 + "px", width: "4px" });

             $("#divSG").css({ height: height - 2 + "px", width: "4px" });

             $("#divRight").css({ height: height + "px", width: width * 0.25 + "px" });

         }

         $(document).ready(function () {

             reinitSize();

             $("#divS").on("mousedown", function (e) {

                 $sliderMoving = true;

                 $("divP").css("cursor", "e-resize");

             });

             $("#divP").on("mousemove", function (e) {

                 if ($sliderMoving) {

                     sliderGhostMoving(e);

                 }

             });

             $("#divP").on("mouseup", function (e) {

                 if ($sliderMoving) {

                     $sliderMoving = false;

                     sliderHorizontalMove(e);

                     $("#divP").css("cursor", "default");

                 }

             });

         });

         $(window).resize(function () {

             reinitSize();

         });

     </script>

 </body>

</html>

3、Demo：jQuery-左右拖动分隔条.rar

jQuery - 左右拖动分隔条的更多相关文章

  1. jquery 可拖动进度条

    实现这个效果怎么弄呢? <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  2. 使用CSS3和jQuery可伸缩的搜索条

    使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光 时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的 ...

  3. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  4. [Android] SeekBar---可拖动进度条

    SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...

  5. 最好用的jquery列表拖动排列(由项目提取)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wuchengzeng/article/details/31766235 最好的jquery列表拖动排 ...

  6. Qt代码创建分隔条

    我们在使用Qt时,会发现在使用UI界面时可以添加窗口分隔条,但我们使用纯代码时却没有分隔条的类函数.这时候我们就需要手动添加,添加方式和Qt自定义标签按钮一样,下面我直接写代码.如果不知道怎么添加的, ...

  7. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  8. jQuery:jQuery性能优化28条建议

    http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...

  9. jquery可拖动表格调整列格子的宽度大小(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Android(十六 ) android 与蓝牙串口通讯

    1.得到蓝牙适配器 BluetoothAdapter mBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); 2.打开蓝牙 if (!mBl ...

  2. CSS背景以及文本

    css设置背景: <style type="text/css"> /*background-image: 直接设置x,y重复而且平铺整个body*/ /*下面两句的功能 ...

  3. PAT 1128 N Queens Puzzle[对角线判断]

    1128 N Queens Puzzle(20 分) The "eight queens puzzle" is the problem of placing eight chess ...

  4. SpringData环境搭建代码编写

    首先我们在前面的两节已经了解了SpringData是干什么用的?那我们从这节开始我们就开始编码测试SpringData. 1:首先我们从配置文件开始,我们首先需要写一个连接数据库的文件db.prope ...

  5. SQL面试题及答案

    我觉得里面有些答案是不正确的,请只作参考 Student(S#,Sname,Sage,Ssex) 学生表       S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别 Cour ...

  6. 454 Authenti cation failed, please open smtp flag first! (Net::SMTPAuthenticationError)

    在用ruby的smtp库发送邮件的时候,出现了这个错误454 Authenti cation failed, please open smtp flag first! (Net::SMTPAuthen ...

  7. iview使用vue-i18n实现国际化

    iview官网中和网上的例子中使用的都是webpack方式,需要import js文件,但是由于项目架构比较简单,没有使用webpack,纯html和js进行交互.所以这里就直接使用js文件引用方式. ...

  8. 从知乎了解到，为什么Mysql禁用存储过程、外键和级联？

    打开帖子直接一张醒目的图,是阿里巴巴的Java开发手册对Mysql相关的要求. 看看下面的回复 灵剑 存储过程没有版本控制,版本迭代的时候要更新很麻烦.存储过程如果和外部程序结合起来用,更新的时候很难 ...

  9. Python3 pandas用法大全

    Python3 pandas用法大全 一.生成数据表 1.首先导入pandas库,一般都会用到numpy库,所以我们先导入备用: import numpy as np import pandas as ...

  10. ubuntu 18.04 64bit如何安装GPU版本tensorflow

    注:笔者的ubuntu18.04 64bit已经安装好了显卡驱动,因此没有此步操作 1.获取cuda(https://developer.nvidia.com/cuda-downloads,选择ubu ...