向下-Div随鼠标拖动改变高度

向下-Div随鼠标拖动改变高度_第1张图片


<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="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
<style type="text/css">
html, body{ 
   /* height: 100%; 
    margin: 0; 
    padding: 0; */
}
#footer { 
    /*position:fixed; */
   /* bottom:0; 
    left:0; */
    position: relative;
    width:100%; 
    height:30px; 
    background-color:#B8D0FA;
}
#expander{ 
    position: absolute;
    bottom: 0;
    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 id="footer">
    
    <span id="info">It's Your Contents !span>
    <div id="expander">div>
div>

body>
html>

你可能感兴趣的:(js,JS日常小功能)