鼠标拖动改变div高度

来源：互联网发布：网络大电影项目书编辑：程序博客网时间：2024/04/29 07:55
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">!window.jQuery && document.write('<script src=http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js><\/script>');</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">这里是内容区</span></div></body></html>
0 0