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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JS原型与继承操作示例
May 09 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
php adodb操作mysql数据库
2009/03/19 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JS的get和set使用示例
2014/02/20 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python传递参数方式小结
2015/04/17 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
大学军训感言600字
2014/02/25 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
欠条格式范本
2015/07/03 职场文书
酒店宣传语大全
2015/07/13 职场文书
2016七夕情人节寄语
2015/12/04 职场文书