cari

Rumah >hujung hadapan web >tutorial js >jQuery menyedari fungsi menyeret bar pemisah ke kiri dan kanan_jquery

jQuery menyedari fungsi menyeret bar pemisah ke kiri dan kanan_jquery

WBOY
WBOYasal
2016-05-16 15:30:411649semak imbas

Contoh dalam artikel ini menerangkan kod pelaksanaan jQuery untuk merealisasikan fungsi menyeret bar pemisah ke kiri dan kanan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kandungan khusus adalah seperti berikut

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

Saya harap artikel ini akan membantu semua orang untuk mengetahui tentang pemisah jquery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tutorial Lanjutan JavaScript 5.6 Jenis Pembungkusan Asas (Butiran)_Kemahiran JavascriptArtikel seterusnya：Tutorial Lanjutan JavaScript 5.6 Jenis Pembungkusan Asas (Butiran)_Kemahiran Javascript

Artikel berkaitan

Lihat lagi