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 相关文章推荐
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
bootstrap css样式之表单
Jan 19 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
超详细的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计划任务、定时执行任务的实现代码
2011/04/23 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python工厂函数用法实例分析
2018/05/14 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python中下标和切片的使用方法解析
2019/08/27 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
员工自我鉴定
2013/10/09 职场文书
新闻报道策划方案
2014/06/11 职场文书
员工团队活动方案
2014/08/28 职场文书
革命电影观后感
2015/06/18 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL