鼠标拖动改变div高度

最新推荐文章于 2024-07-05 16:01:42 发布

jac-song

最新推荐文章于 2024-07-05 16:01:42 发布

阅读量3.6k

点赞数

分类专栏： js相关

本文链接：https://blog.csdn.net/song_jiang_long/article/details/53082631

版权

js相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

jac-song

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖动改变div高度

鼠标拖动改变div高度!window.jQuery && document.write('');html, body{ height: 100%; margin: 0; padding: 0; }#footer { position:fixed; bottom:0; left:0; width:100%; height:30px; background-color:#B8D0FA;
复制链接

扫一扫

专栏目录