<万博manbetx平台>左右两栏布局右侧自适应+左右拖动改变两栏宽度 - 万博manbetx平台中文网

左右两栏布局右侧自适应+左右拖动改变两栏宽度

首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中间的div是用来拖动的,具体实现如下,感兴趣的朋友可以参考下哈

今天一下午的学习成果,分享一下,欢迎高手指教。
首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。

复制代码
代码如下:


<万博manbetx平台>


左右两栏布局右侧自适应+左右拖动改变两栏宽度 - 万博manbetx平台中文网


左侧内容






css布局:采用固定绝对定位,并定下坐标的方法,我感觉这种方法比较笨的,水平有限。

复制代码
代码如下:

div,body,万博manbetx平台{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
};
};

以上就是左右两栏布局右侧自适应+左右拖动改变两栏宽度的详细内容,更多请关注万博manbetx平台中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:万博manbetx平台中文网首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏