jQuery实现鼠标拖动改变Div高度
2015-04-25 19:48
651 查看
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域。
以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改。
直接上代码
以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改。
直接上代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Div随鼠标拖动改变高度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery-1.8.3.min.js"></script> <style type="text/css"> html, body{ height: 100%; margin: 0; padding: 0; } #footer { position:fixed; bottom:0; left:0; width:100%; height:30px; background-color:#B8D0FA;} #expander{ width:100%; height:6px; background-color:#999;} #expander:hover{ cursor:n-resize;} </style> <script> $(function(){ var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30; $("#expander") .mousedown(function(e){ src_posi_Y = e.pageY; is_mouse_down = true; }); $(document).bind("click mouseup",function(e){ if(is_mouse_down){ is_mouse_down = false; } }) .mousemove(function(e){ dest_posi_Y = e.pageY; move_Y = src_posi_Y - dest_posi_Y; src_posi_Y = dest_posi_Y; destHeight = $("#footer").height() + move_Y; if(is_mouse_down){ $("#footer").css("height", destHeight > 30 ? destHeight : 30); } }); }); </script> </head> <body> <div style="width:100%; height:1000px; background-color:#F2F2F2;"></div> <div id="footer"><div id="expander"></div><span id="info">It's Your Contents !</span></div> </body> </html>
相关文章推荐
- Jquery实现鼠标拖动改变div高度
- JQuery------实现鼠标摁下抬起时div背景色改变
- 鼠标拖动改变div高度
- 向下-Div随鼠标拖动改变高度
- jquery 鼠标拖动改变div大小
- jquery实现动态改变div宽度和高度
- 鼠标拖动改变DIV等网页元素的大小的实现方法
- jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
- jquery实现动态改变div宽度和高度
- Jquery实现鼠标可拖动的进度条
- 可以用鼠标拖动的DIV实现思路及代码
- jQuery实现div随意拖动的实例代码(通用代码)
- Jquery实现鼠标移动div
- 用jQuery轻松实现Div拖动
- jquery 实现鼠标点击div盒子移动功能
- 使用jQuery的easydrag插件实现可拖动的DIV弹出框
- jquery实现div自适应浏览器高度(宽度)
- jQuery实现DIV拖动
- Jquery实现如何实现DIV由下向上展开的效果,鼠标浮动时div由下向上缓慢展开。