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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
canvas知识总结
Jan 25 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 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
JAVA/JSP学习系列之六
2006/10/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery序列化方法实例分析
2015/06/10 Javascript
javascript运动详解
2015/07/06 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python flask 多对多表查询功能
2017/06/25 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python中sys.argv函数精简概括
2018/07/08 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python实现电子词典
2020/03/03 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
联想C++笔试题
2012/06/13 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
益达广告词
2014/03/14 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技