最近项目中需要在DashBoard页面做一个事件通知栏，该通知栏固定位于页面底部，鼠标拖动该DIV实现自动改变高度扩展内容显示区域。
以下是一个设计原型，基于jQuery实现，只实现了拖动效果，没有做页面美化，可以根据需求做相应修改。
直接上代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 3 <head> 4 <title>Div随鼠标拖动改变高度</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script src="jquery-1.8.3.min.js"></script> 7 <style type="text/css"> 8 html, body{ height: 100%; margin: 0; padding: 0; } 9 #footer { position:fixed; bottom:0; left:0; width:100%; height:30px; background-color:#B8D0FA;} 10 #expander{ width:100%; height:6px; background-color:#999;} 11 #expander:hover{ cursor:n-resize;} 12 </style> 13 <script> 14 $(function(){ 15 var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30; 16 $("#expander") 17 .mousedown(function(e){ 18 src_posi_Y = e.pageY; 19 is_mouse_down = true; 20 }); 21 $(document).bind("click mouseup",function(e){ 22 if(is_mouse_down){ 23 is_mouse_down = false; 24 } 25 }) 26 .mousemove(function(e){ 27 dest_posi_Y = e.pageY; 28 move_Y = src_posi_Y - dest_posi_Y; 29 src_posi_Y = dest_posi_Y; 30 destHeight = $("#footer").height() + move_Y; 31 if(is_mouse_down){ 32 $("#footer").css("height", destHeight > 30 ? destHeight : 30); 33 } 34 }); 35 }); 36 </script> 37 </head> 38 <body> 39 <div style="100%; height:1000px; background-color:#F2F2F2;"></div> 40 <div id="footer"><div id="expander"></div><span id="info">It's Your Contents !</span></div> 41 </body> 42 </html>