编程 Javascript

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

Posted in Javascript onNovember 21, 2015

本文实例讲述了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分隔条有所帮助。

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

- Author -

Jimmy Cheung11

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象编程万物皆对象

Sep 17 Javascript

腾讯UED 漂亮的提示信息效果代码

Sep 12 Javascript

jQuery基于ajax实现带动画效果无刷新柱状图投票代码

Aug 10 Javascript

jquery validate和jquery form 插件组合实现验证表单后AJAX提交

Aug 26 Javascript

AngularJS基础 ng-open 指令简单实例

Aug 02 Javascript

ion content 滚动到底部会遮住一部分视图的快速解决方法

Sep 06 Javascript

详解Angular路由 ng-route和ui-router的区别

May 22 Javascript

vue一步步实现alert功能

Jul 05 Javascript

vue项目强制清除页面缓存的例子

Nov 06 Javascript

vue实现在线预览pdf文件和下载（pdf.js）

Nov 26 Javascript

ES6 proxy和reflect的使用方法与应用实例分析

Feb 15 Javascript

vue实现锚点定位功能

Jun 29 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