jQuery-左右拖動分隔條

2024-04-27 15:01:57

字體：大中小

供稿：網(wǎng)友

1、實(shí)現(xiàn)效果：

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;                  //兼容各種瀏覽器的,獲取鼠標(biāo)真實(shí)位置         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的絕對坐標(biāo)的功能函數(shù),即使是非絕對定位,一樣能獲取到         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>