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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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 第三节 变量介绍
2012/04/28 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
环保建议书作文
2014/03/12 职场文书
公司门卫工作职责
2014/06/28 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
婚宴邀请函
2015/01/30 职场文书
高中美术教学反思
2016/02/17 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Tomcat配置访问日志和线程数
2022/05/06 Servers