本文實例講述了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分隔條有所幫助。
新聞熱點
疑難解答
