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. WebDriver API 实例详解（三）

    二十一.模拟鼠标右键事件 被测试网页的网址: http://www.sogou.com Java语言版本的API实例代码: package test; import org.testng.annota ...

  2. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

  3. Cannot find entry file index.android.js in any of the roots:[ Android ]

    Changed the version of react project to a lower one from here npm install -g rninit rninit init [Pro ...

  4. 7.3 Models -- Creating And Deleting Records

    一.Creating 1. 你可以通过调用在store中的createRecord方法来创建records. store.createRecord('post', { title: 'Rails is ...

  5. Redis在Linux下的安装与配置

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis是 NoSQL技术阵营中的一员. 说到NoSQL, ...

  6. Java transient关键字的理解

    transient [ˈtrænziənt] adj. 短暂的; 转瞬即逝的; 临时的 n 临时旅客; 瞬变现象; 候鸟; 1. transient的作用及使用方法       我们都知道一个对象只要 ...

  7. vgg_face人脸识别

    最近参考http://blog.csdn.net/hlx371240/article/details/51388022一文,用LFW数据集对vgg_face.caffemodel进行fine-tune ...

  8. Linux笔记 #05# 断开远程连接后保持程序运行

    教程:Linux 技巧:让进程在后台可靠运行的几种方法 网上搜索了一下,方法很多,选用最流行的 screen 命令参考:http://man.linuxde.net/screen 1. 安装 root ...

  9. SQL学习笔记四(补充-2)之MySQL多表查询

    阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 准备表 #建表 create table depart ...

  10. bzoj1617 / P2904 [USACO08MAR]跨河River Crossing

    P2904 [USACO08MAR]跨河River Crossing 显然的dp 设$f[i]$表示运走$i$头奶牛,木筏停在未过河奶牛一侧所用的最小代价 $s[i]$表示一次运$i$头奶牛到对面的代 ...