手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >左右两栏布局右侧自适应+左右拖动改变两栏宽度
左右两栏布局右侧自适应+左右拖动改变两栏宽度
摘要:今天一下午的学习成果,分享一下,欢迎高手指教。首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中...

今天一下午的学习成果,分享一下,欢迎高手指教。

首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个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

};

};

【左右两栏布局右侧自适应+左右拖动改变两栏宽度】相关文章:

CSS命名规范化的三种通用命名

兼容FIREFOX下背景层的自适应高度

巧用CSS来控制div自适应浏览器的高度

DIV下图片自适应解决方法

注意你的网站布局对访者的友好程度

大图片根据分辨率自适应宽度仍居中显示

DIV下图片自适应解决方法

相邻div实现一个跟着另一个自适应高度示例代码

CSS+DIV制作梯形状的不规则网站导航

CSS网页布局实用小技巧

精品推荐
分类导航