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. Callable 和Runnable

    1:Callable ,方法调用会有返回值. private void callableTest throws ExecutionException, InterruptedException { E ...

  2. Mac Atom的PHP插件

    首先,需要在 ~/.atom目录下创建 .atom文件,写入如下内容: strict-ssl = false http_proxy = socks5://127.0.0.1:16888 https_p ...

  3. 模块讲解----subprocess模块

    历史 #输出结果到屏幕上,并不返回执行状态os.system('dir')#保存命令的执行结果输出ret = os.popen('dir').read() 问题:上面2条是把命令结果保存下来了,但是返 ...

  4. 记录：EPALN Electric P8 2.4.4.8366 安装记录

    系统:win7  32位 旗舰版.  (原版系统 非GHOST) 第一步:解压安装. setup.exe 右击 选择 注意:把  360  百度 杀毒之类的全部关闭 第二步: 第三步: 第四步: 第五 ...

  5. Console 窗口

    Console窗口 记住,即是在GUI程序中你也可以拥有一个Console窗口.----这意味着你可以再GUI程序中使用printf.puts. Console窗口由系统的驱动设备程序负责,即是你的程 ...

  6. Smarty模板变量调节器

    Smarty模板变量调节器用法 在smarty里面,怎么修饰文本和变量呢?当然,你可以通过php函数处理文本,然后再通过assign()方法分配到模板,其实smarty提供了变量调节器能够很容易的处理 ...

  7. AtCoder Beginner Contest 115 Solution

    A Christmas Eve Eve Eve Solved. #include <bits/stdc++.h> using namespace std; int main() { int ...

  8. Python: 分数运算

    fractions 模块可以被用来执行包含分数的数学运算 >>> from fractions import Fraction >>> a = Fraction(5 ...

  9. javascript日期字符串和日期对象相互转换

    HTML页面间需要传递日期和时间参数的时候,如果需要对日期字符串进行时间的运算,就需要先将日期字符串转换成JS日期对象. 在js中,yyyy-MM-dd HH:mm:ss格式的日期字符串不能用来直接构 ...

  10. HttpClient-RestTemplate-Feign

    如何通过Java发送HTTP请求,通俗点讲,如何通过Java(模拟浏览器)发送HTTP请求. Java有原生的API可用于发送HTTP请求,即java.net.URL.java.net.URLConn ...