Jquery实现鼠标拖动改变div高度

前言

鼠标拖动该DIV实现自动改变高度扩展内容显示区域。
以下是一个设计原型，基于jQuery实现，只实现了拖动效果，没有做页面美化，可以根据需求做相应修改。
转自：http://www.cnblogs.com/xyd21c/p/4456471.html

代码

<!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高度相关推荐

php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
html5 jquery 鼠标拖动例子,jquery实现鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文://www.jb51.net/article/42087.htm html部分: 指标: 注:可以通 ...
php如何设鼠标经过颜色,jQuery实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: jQuery实现感应鼠标经过Div层变换图层背景颜色) .divbox{ height:300 ...
点击改变div高度_css实现div两列布局（两种方法）
一.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应二.思路首先把这个问题分步解决,需要攻克以下两点: 1.让两个div并排到一行 2.让一个div宽度固定,另个div占 ...
android div拖动排序,鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:https://www.jb51.net/article/42087.htm html部分: 指标: ...
JQuery实现鼠标拖动元素移动位置
JQuery实现元素移动位置有很多种方法,其中一个是根据鼠标在指定区域内随意移动,还有一种的是根据方向键在一定区域内上下左右平移.这二种只能说各有优劣,通过方向键平移,实现相对简单,操作也更具备可控性 ...
鼠标移动改变div内容
主页面 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncodi ...
Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件（支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG）
前言网上大部分教程代码臃肿且有BUG,另外代码注释没有很难读懂. 本文将从 0-1 完成列表拖曳排序功能(带动画),您只需要复制后改改样式即可, 支持电脑端与手机端兼容,代码干净整洁且超详细的注释. ...

Jquery实现鼠标拖动改变div高度

前言

代码

Jquery实现鼠标拖动改变div高度相关推荐

最新文章

热门文章