javascript实现鼠标拖动改变层大小的方法


Posted in Javascript onApril 30, 2015

本文实例讲述了javascript实现鼠标拖动改变层大小的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
<title>拖动改变层的大小</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style> {
box-sizing: border-box; moz-box-sizing: border-box
}
#testDiv { background-color: buttonface; background-repeat: repeat; 
background-attachment: scroll; color: #3969A5; height: 300px; 
left: 30px; overflow: hidden; width: 500; z-index: 2; 
border: 2px outset white; margin: 0px; padding: 2px; 
background-position: 0% 50% }
body { font-family: Verdana; font-size: 9pt }
#innerNice { background-color: white; background-repeat: repeat;
background-attachment: 
scroll; color: #3969A5; height: 100%; overflow: auto; 
width: 100%; border: 2px inset white; padding: 8px; 
background-position: 0% 50% }
</style>
<SCRIPT language=javascript>
var theobject = null; 
function resizeObject() {
this.el = null; //pointer to the object
this.dir = ""; //type of current resize (n,s,e,w,ne,nw,se,sw)
this.grabx = null; //Some useful values
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}
function getDirection(el) {
var xPos, yPos, offset, dir;
dir = "";
xPos = window.event.offsetX;
yPos = window.event.offsetY;
offset = 8; //The distance from the edge in pixels
if (yPos<offset) dir += "n";
else if (yPos > el.offsetHeight-offset) dir += "s";
if (xPos<offset) dir += "w";
else if (xPos > el.offsetWidth-offset) dir += "e";
return dir;
}
function doDown() {
var el = getReal(event.srcElement, "className", "resizeMe");
if (el == null) {
theobject = null;
return;
} 
dir = getDirection(el);
if (dir == "") return;
theobject = new resizeObject();
theobject.el = el;
theobject.dir = dir;
theobject.grabx = window.event.clientX;
theobject.graby = window.event.clientY;
theobject.width = el.offsetWidth;
theobject.height = el.offsetHeight;
theobject.left = el.offsetLeft;
theobject.top = el.offsetTop;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function doUp() {
if (theobject != null) {
theobject = null;
}
}
function doMove() {
var el, xPos, yPos, str, xMin, yMin;
xMin = 8; //The smallest width possible
yMin = 8; // height
el = getReal(event.srcElement, "className", "resizeMe");
if (el.className == "resizeMe") {
str = getDirection(el);
//Fix the cursor
if (str == "") str = "default";
else str += "-resize";
el.style.cursor = str;
}
//Dragging starts here
if(theobject != null) {
if (dir.indexOf("e") != -1)
theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px";
if (dir.indexOf("s") != -1)
theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px";
if (dir.indexOf("w") != -1) {
theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";
theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px";
}
if (dir.indexOf("n") != -1) {
theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";
theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px";
}
window.event.returnValue = false;
window.event.cancelBubble = true;
} 
}
function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;
</SCRIPT>
</head>
<body>
<div class="resizeMe" id="testDiv">
<div id="innerNice">
<p align="center"> </p>
<p align="center">
请在边框处拖动鼠标</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
详解Node.js模板引擎Jade入门
Jan 19 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
PHP date函数常用时间处理方法
2015/05/11 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
菜单效果
2006/10/14 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python3.0 字典key排序
2008/12/24 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
jupyter安装小结
2016/03/13 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
母亲追悼会答谢词
2014/01/27 职场文书
餐饮投资计划书
2014/04/25 职场文书
社区清明节活动总结
2014/07/04 职场文书
红色影片观后感
2015/06/18 职场文书
公司人力资源管理制度
2015/08/05 职场文书
素质教育培训心得体会
2016/01/19 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL