今天一下午的学习成果,分享一下,欢迎高手指教。
首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>左右两栏拖动改变宽度</title> 6 </head> 7 8 <body> 9 <div id="left">左侧内容</div> 10 <div id="middle"></div> 11 <div id="right"> 12 右侧内容 13 </div> 14 15 </body> 16 </html>
css布局:采用固定绝对定位,并定下坐标的方法,我感觉这种方法比较笨的,水平有限。
1 div,body,html{margin:0; padding:0; width:100%;} 2 #left,#right,#middle{ height:300px; position:absolute;} 3 #left{width:300px; background:#ccc;} 4 #middle{ width:9px; background:#666;left:300px;} 5 #middle:hover{ cursor:w-resize;} 6 #right{right:0; background:#ccc; left:309px; width:auto;}
最后的js实现中间栏的拖动效果:
1 function $(id) { 2 return document.getElementById(id) 3 } 4 window.onload = function() { 5 left = $("left"), right = $("right"), middle = $("middle"); 6 var middleWidth=9; 7 middle.onmousedown = function(e) { 8 var disX = (e || event).clientX; 9 middle.left = middle.offsetLeft; 10 document.onmousemove = function(e) { 11 var iT = middle.left + ((e || event).clientX - disX); 12 var e=e||window.event,tarnameb=e.target||e.srcElement; 13 maxT=document.body.clientWidth; 14 iT < 0 && (iT = 0); 15 iT > maxT && (iT = maxT); 16 middle.style.left = left.style.width = iT + "px"; 17 right.style.width = document.body.clientWidth - iT -middleWidth + "px"; 18 right.style.left = iT+middleWidth+"px"; 19 return false 20 }; 21 document.onmouseup = function() { 22 document.onmousemove = null; 23 document.onmouseup = null; 24 middle.releaseCapture && middle.releaseCapture() 25 }; 26 middle.setCapture && middle.setCapture(); 27 return false 28 }; 29 };
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>