jQuery实现分隔条左右拖动功能


Posted in Javascript onNovember 21, 2015

本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jQuery实现分隔条左右拖动功能

jQuery实现分隔条左右拖动功能

具体内容如下

<!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>

希望本文所述对大家学习jquery分隔条有所帮助。

Javascript 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js中document.write的那点事
Dec 12 Javascript
javascript每日必学之多态
Feb 23 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
超详细的javascript数组方法汇总
Nov 21 #Javascript
javascript实现动态统计图开发实例
Nov 21 #Javascript
js实现索引图片切换效果
Nov 21 #Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 #Javascript
javascript实现Email邮件显示与删除功能
Nov 21 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 #Javascript
Jquery ajax基础教程
Nov 20 #Javascript
You might like
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP 正则表达式小结
2015/02/12 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
javascript语言结构小记(一)
2011/09/10 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
javascript表单正则应用
2017/02/04 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
详解Django中的form库的使用
2015/07/18 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python内打印变量之%和f的实例
2020/02/19 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python如何写出表白程序
2020/06/01 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
MySQL中order by的执行过程
2022/06/05 MySQL