jQuery實現鼠標拖動改變Div高度

時間 2019-11-19

原文原文鏈接

最近項目中須要在DashBoard頁面作一個事件通知欄，該通知欄固定位於頁面底部，鼠標拖動該DIV實現自動改變高度擴展內容顯示區域。css

如下是一個設計原型，基於jQuery實現，只實現了拖動效果，沒有作頁面美化，能夠根據需求作相應修改。html

直接上代碼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="width: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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。