最近项目中需要在DashBoard页面做一个事件通知栏，该通知栏固定位于页面底部，鼠标拖动该DIV实现自动改变高度扩展内容显示区域。

以下是一个设计原型，基于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高度的更多相关文章

  1. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  2. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 调用jquery的resize方法改变div的宽度和高度在IE中不变，在谷歌中可以正常显示

    1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...

  4. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  5. js改变div高度

    用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...

  6. [置顶] 原创鼠标拖动实现DIV排序

    先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:http://blog.csdn.net/littlebo01/article/details/12 ...

  7. jquery实现鼠标拖动

    <html>   <head>   <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...

  8. C# 运行时通过鼠标拖动改变控件的大小

    来源:http://blog.csdn.net/yanleigis/article/details/1819447 using System; using System.Collections.Gen ...

  9. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

随机推荐

  1. 去掉mac终端里面hostname提示处的bogon

    打开终端,如果在命令提示$前面显示的主机名变成了bogon,则可以通过命令行修改: sudo scutil --set hostname 新主机名

  2. Access forbidden! You don't have permission to access the requested object. It is either read-protected or not readable by the server

    好久不没弄 apache和php了,突然遇到这种奇葩的问题,本来想直接在网上找现成的解决思路,结果网上搜索花了不少功夫,也没找到原因. 后来看日志文件:apache\logs\error.log发现了 ...

  3. SQL数据库添加新账号，只操作指定数据库

    思路: 1.创建数据库服务器登录用户 2.创建指定数据库的用户,并且和服务器用户联系起来 3.给数据库的用户添加角色 代码实现: 1.创建名为login的服务器登录用户dba,尼玛dbpwd,默认数据 ...

  4. thinkphp关闭调试模式(APP_DEBUG => false),导致程序出错

    thinkphp关闭调试模式(APP_DEBUG => false),导致程序出错,开启调试模式,不报错,怎么解决? 查看Logs日志记录: [ --29T09::+: ] 113.108.11 ...

  5. 对想进入Unity开发新人的一些建议

    提前声明:本文只是写给那些非职业游戏开发人士,只面向那些在校本科生,或已就业但无unity背景的同学们,当然是面对程序员方向的.本人刚工作也没多久,资历尚浅,之前在网上有一位同学让我谈谈一些想法,所以 ...

  6. 安装Nginx作为Windows服务自启动运行

    如果Nginx每次使用都需要手动启动确实很麻烦,所以最好将其设置为Windows系统服务,开机自启动就行了. 1.下载并修改运行环境支持程序 1).下载地址:http://ng-srvinst.att ...

  7. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  8. Struts2：上传下载

    ud_upload.jsp <s:form action="fileupload" enctype="multipart/form-data"> & ...

  9. 从ICassFactory为CLSID为{17BCA6E8-A950-497E-B2F9-AF6AA475916F}的COM组件创建实例失败问题解决方法

    从ICassFactory为CLSID为{17BCA6E8-A950-497E-B2F9-AF6AA475916F}的COM组件创建实例失败,原因是出现以下错误:c001f011.(Microsoft ...

  10. 【SSM 4】Mybatis逆向生成工具

    在上一篇博客中说到,Mybatis是灵活的SQL语句应用,不想Hibernate一样有其封装好的方法,那么,当我们用Mybatis的时候(Hibernate),我们都需要编写其实体类,和配置文件.本篇 ...