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. Linux常用命令【总结】

    Linux命令中文版详解:https://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/index.html Linux系统,我用过的有centos和 ...

  2. mysql 数据操作 多表查询 准备

    为什么需要多表查询: 因为我们不可能把所有数据都放在一张表里 我们把不同数据存储 放在一张一张不同表 方便管理,但我们为了方便管理,把数据拆分到一张一张表去存储. 但是数据还是一个整体,数据之间是有关 ...

  3. EOS 的网站及资料doc

    https://github.com/EOSIO/Documentation/blob/master/zh-CN/Roadmap.md https://bytemaster.github.io/bit ...

  4. 配置Tomcat直接显示目录结构和文件列表

    Tomcat是直接显示目录结构和文件列表,只是在配置里面给关闭了. 关键在这里:\conf\web.xml 这个文件有一段配置直接控制Tomcat是允许显示目录结构和文件列表. <servlet ...

  5. PAT 1147 Heaps[难]

    1147 Heaps(30 分) In computer science, a heap is a specialized tree-based data structure that satisfi ...

  6. Django组件补充(缓存，信号，序列化)

    Django组件补充(缓存,信号,序列化) Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑 ...

  7. 3.4 Templates -- Displaying A List of Items(展示一个集合)

    一. 概述 1. example 如果你需要遍历一个对象集合,使用Handlebars的{{#each}}. <ul> {{#each people key="id" ...

  8. sql server中的怎么把数值型转换为字符串

    ①select cast(字段 as varchar) from 表名 ②select convert(varchar(50),字段) from 表名  

  9. c++第二十一天

    p115~p118: 1.区分int *p[4];和int (*p)[4];.前者是整型指针的数组,后者是指向含有4个整数的数组. 2.规避上述问题的方法就是:使用 auto和 decltype. 3 ...

  10. SQL学习笔记四(补充-2-1)之MySQL SQL查询作业答案

    阅读目录 一 题目 二 答案 一 题目 1.查询所有的课程的名称以及对应的任课老师姓名 2.查询学生表中男女生各有多少人 3.查询物理成绩等于100的学生的姓名 4.查询平均成绩大于八十分的同学的姓名 ...