<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { overflow:hidden;}
.cont { 100%; position:absolute; background-color:#99F; top:50px; bottom:50px;}
.cont_son { height:100%;}
.left { 150px; background-color:#FFc; position:absolute; left:0px; height:100%;}
.center { position:absolute; background-color:#F9F; left:150px; height:100%; right:300px; -webkit-user-select:none;}
.center_top { 100%; position:relative; overflow:hidden;}
.right { 200px; position:absolute; right:100px; background-color:#CC6; height:100%; -webkit-user-select:none;}
.footer { 100px; background-color:#399; height:100%; float:right;}
.cur_footer {
8px;
height: 100%;
position: absolute;
overflow: hidden;
border-left:solid 1px #333;
cursor:w-resize;
box-shadow:-2px 0px 2px #888 ;
text-indent:-9999px;
}
.cur_footer_but { background-image:url(bg0010.PNG); position:absolute; z-index:10; top:50%; margin-top:-5px; 9px; height:38px;}
</style>
</head>
<body>
<div class="cont">
<div class="cont_son">
<div class="left">此处显示 class "left" 的内容</div>
<div class="center">
<div class="center_top">此处显示 class "center" 的内容</div>
</div>
<div class="right">
<div class="cur_footer" id="wResize">
<div class="cur_footer_but">此处显示 class "cur_footer_but" 的内容</div>
</div>
</div>
<div class="footer" id="footer">此处显示 class "footer" 的内容</div>
</div>
</div>
<script type="text/javascript">
var but = document.getElementById("wResize");
but.addEventListener("mousedown",move);
window.addEventListener("mouseup",stopGo);
function move (){
down = true ;
window.addEventListener("mousemove",changeWidth);
}
function changeWidth(e){
if(down){
var x = e.clientX ;
var width = document.body.clientWidth;
var foooter = document.getElementById("footer").offsetWidth;
var newWidth = width-x-foooter;
var rightBlock = document.getElementsByClassName("right")[0];
rightBlock.style.width = newWidth+"px";
var centerBlock = document.getElementsByClassName("center")[0];
centerBlock.style.right = (newWidth+foooter)+"px";
//console.log(newWidth);
}
}
function stopGo(){
down = false ;
window.removeEventListener("mousemove",changeWidth);
}
</script>
</body>
</html>
目前只支持谷歌浏览器ie9