您的位置：首页 > 其它

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

2017-12-22 15:13 525 查看

<!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> -->
<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 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 id="expander"></div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 手动调整高度

相关文章推荐

新的分享

章节导航