JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】
666
2024-03-04
本文實例講述了jQuery實現(xiàn)分隔條左右拖動功能的實現(xiàn)代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體內(nèi)容如下
<!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="http://www.gimoo.net/t/1904/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的絕對坐標的功能函數(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>
希望本文所述對大家學(xué)習(xí)jquery分隔條有所幫助。
