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. 阿里云centos7.2 安装mysql 6.5

    [root@111 ~]# uname -aLinux bxhs 3.10.0-327.22.2.el7.x86_64 #1 SMP Thu Jun 23 17:05:11 UTC 2016 x86_ ...

  2. sql server 用脚本管理作业

    转自:https://blog.csdn.net/yunye114105/article/details/6594826 摘要: 在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI ...

  3. 第六章并发编程，异步执行框架executor

    异步执行框架executor是一个接口,只有一个方法.接受一个Runnable做为参数,执行任务. 将任务的执行与提交解耦. 1:executor package java.util.concurre ...

  4. Web Services 平台元素SOAP、WSDL 、UDDI

    Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? SOAP 是一种使应用程序有能力通过 HTTP 交换信息的基于 XML 的简易协议.或者可以更简 ...

  5. 前端基础（html）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. bootstrap fileinput api翻译笔记

    bootstrap fileinput HTML标签属性 data-show-preview="false" // 是否显示预览区 multiple // 多文件 data-sho ...

  7. SpringData_Repository接口概述

    Repository 接口是 Spring Data 的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法  public interface Repository<T, ...

  8. 吴恩达深度学习笔记（deeplearning.ai）之循环神经网络（RNN）（三）

    1. 导读 本节内容介绍普通RNN的弊端,从而引入各种变体RNN,主要讲述GRU与LSTM的工作原理. 事先声明,本人采用ng在课堂上所使用的符号系统,与某些学术文献上的命名有所不同,不过核心思想都是 ...

  9. Spring的一些面试题（转）

    一.spring工作原理: 1.spring mvc的所有请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求进行真正的处理工作.2.DispatcherServlet ...

  10. Windows10系统远程桌面连接出现卡顿如何解决

    最新的windows10系统下,用户只要开启远程桌面连接,就能够轻松地操控其他电脑.但是,最近部分用户在win10中启用远程连接时,发现电脑窗口变得非常缓慢卡顿,这是怎么回事呢?其实,该问题与系统的设 ...