黑松山资源网 Design By www.paidiu.com
今天一下午的学习成果，分享一下，欢迎高手指教。
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>左右两栏拖动改变宽度</title>
</head>
<body>
<div id="left">左侧内容</div>
<div id="middle"></div>
<div id="right">
右侧内容
</div>
</body>
</html>
css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。
复制代码代码如下:
div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}
最后的js实现中间栏的拖动效果：
复制代码代码如下:
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>左右两栏拖动改变宽度</title>
</head>
<body>
<div id="left">左侧内容</div>
<div id="middle"></div>
<div id="right">
右侧内容
</div>
</body>
</html>
css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。
复制代码代码如下:
div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}
最后的js实现中间栏的拖动效果：
复制代码代码如下:
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};
黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路：年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减：亲亲环节没了！
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]