jquery分隔拖动,jQuery实现分隔条左右拖动功能_jquery_脚本之家【金沙8331网址】

jQuery完结分隔条左右拖动作用,jquery分隔拖动

jquery分隔拖动,jQuery实现分隔条左右拖动功能_jquery_脚本之家【金沙8331网址】。正文实例汇报了jQuery完结分隔条左右拖动效用的得以完结代码。分享给大家供大家仿效。具体如下:
运营效果截图如下:

金沙8331网址 1

金沙8331网址 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>

愿意本文所述对大家学习jquery分隔条具备助于。

本文实例陈述了jQuery达成分隔条左右拖动功效的实今世码。分享给大家供大家参考。具体如下…

本文实例呈报了jQuery达成分隔条左右拖动效能的兑今世码。分享给我们供大家参照他事他说加以考查。具体如下:运营效果截图如下:

   New Document    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; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; z-index: 1000; }           var $sliderMoving = false; //&#20860;&#23481;&#21508;&#31181;&#27983;&#35272;&#22120;&#30340;,&#33719;&#21462;&#40736;&#26631;&#30495;&#23454;&#20301;&#32622; function mousePosition ev = window.event; if  { 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 }; }; //&#33719;&#21462;&#19968;&#20010;DIV&#30340;&#32477;&#23545;&#22352;&#26631;&#30340;&#21151;&#33021;&#20989;&#25968;,&#21363;&#20351;&#26159;&#38750;&#32477;&#23545;&#23450;&#20301;,&#19968;&#26679;&#33021;&#33719;&#21462;&#21040; function getElCoordinate { var t = dom.offsetTop; var l = dom.offsetLeft; dom = dom.offsetParent; while  { t += dom.offsetTop; l += dom.offsetLeft; dom = dom.offsetParent; }; return { top: t, left: l }; }; //&#20998;&#38548;&#26465;&#24189;&#28789;&#24038;&#21491;&#25302;&#21160; function sliderGhostMoving.css({ left: mousePosition.x - 2, display: "block" }); }; //&#23436;&#25104;&#20998;&#38548;&#26465;&#24038;&#21491;&#25302;&#21160; function sliderHorizontalMove { var lWidth = getElCoordinate.left - 2; var rWidth = $ - lWidth - 6; $.css("width", lWidth + "px"); $.css("width", rWidth + "px"); $.css; }; function reinitSize() { var width = $ - 6; var height = $; $.css({ height: height + "px", width: width * 0.75 + "px" }); $.css({ height: height - 2 + "px", width: "4px" }); $.css({ height: height - 2 + "px", width: "4px" }); $.css({ height: height + "px", width: width * 0.25 + "px" }); } $.ready { reinitSize.on("mousedown", function  { $sliderMoving = true; $.css; }); $.on("mousemove", function  { if  { sliderGhostMoving.on("mouseup", function  { if  { $sliderMoving = false; sliderHorizontalMove.css; } }); }); $.resize { reinitSize;  

意在本文所述对我们学习jquery分隔条具有利于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注