使用JS制作一个鼠标可拖的DIV(四)——缩放
原理与鼠标拖动 DIV 相同。
下面就先实现一个在DIV的右上角显示一个小正方形(类似)。
当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小。
一、思路
1、鼠标按时事件。
这里要初始化数据。
同移动一样,给小正方形绑定鼠标按时事件。
(1)获得并保存要移动的元素(parent)的宽(parentWidth)与高(parentHeight)。
即:元素缩放前的宽与高。
(2)由于是要按比例缩放,所以,要在这时计算出宽与高的比例(scale),得到的结果保留一位小数。
(3)获得鼠标的 X 坐标(mouseX),用于计算鼠标移动前与移动后的位置。
2、鼠标拖动事件。
同移动一样,给 document 帮绑定移动事件。
由于小正方形是放在元素(parent)中的,为了避免绑定的鼠标按下事件与元素(parent)中相同的事件有冲突。
所以,在绑定document.onmousemove前,要先清空元素(parent)的onmousedown事件。
parent.onmousedown = function () { }
document.onmousemove = function (doc) {
}
(1)计算出:鼠标移动的差值(moveWidth) = 移动后的鼠标坐标(currentMouseX) - 移动前的鼠标坐标(mouseX)。
(2)元素(parent)缩放后的宽度(width) = 元素(parent)当前的宽度 + 鼠标移动的差值(moveWidth)
(3)元素(parent)缩放后的高度(height) = 元素(parent)缩放的后的宽度(width)X (1 / 宽与高的比例(scale))
即:height = width X (1 / scale)
注意,这里要使用四舍五入来取整。
(4)由于是要以元素(parent)左下角的坐标为定点,所以需要计算出元素(parent)左上角的 Y 坐标(top)的偏移量。
元素(parent)左上角的 Y 坐标(top) = 元素(parent)当前左上角的 Y 坐标 - (元素(parent)缩放后的高度(height) - 元素(parent)缩放前的高度(parentHeight))
即:
top = parent.offsetTop - (height - parentHeight);
设置元素(parent)左上角的 Y 坐标。
设置元素(parent)缩放后的宽度。
设置元素(parent)缩放后的高度。
parent.style.top = top + "px";
parent.style.width = width + "px";
parent.style.height = height + "px";
更新当前鼠标的 X 坐标(mouseX)。
更新当前元素的宽度(parentWidth)。
更新当前元素的高度(parentHeight)。
mouseX = currentMouseX;
parentWidth = parent.offsetWidth;
parentHeight = parent.offsetHeight;
3.鼠标放开事件
当鼠标放开时:
清除 document.onmousemove 事件。
重新绑定(parent)的 onmousedown 事件到 moveBind 函数。
二、实现
续上篇
首先,在元素(parent)里增加一个子DIV并绑定onmousedown事件到zoomBind函数,做为右上角的小正方形。
在 addElement 函数里增加:
var rightSize = "<div class='resize' onmousedown='zoomBind(this, event)'></div>";
CSS样式是:
.resize {
width: 7px;
height: 7px;
background-color: #ddd;
border: 1px solid #000;
top: -5px;
right: -5px;
position: absolute;
cursor: ne-resize;
}
为了避免事件冲突,在 moveBind 函数的最开始增加一个 bool 类型的变量,当鼠标按下时,设置为 true, 放开时,设置为 false。
function moveBind(obj, evnt) {
isMouseMove = true;
/*...*/
}
moveBind 函数里绑定的onmouseup 事件:
document.onmouseup = function () {
isMouseMove = false;
document.onmousemove = function () { }
};
现在创建zoomBind函数:
//是否元素缩放。
var isMouseZoom = false; function zoomBind(obj, evnt) {
isMouseZoom = true; //设置最小宽度。
var minWidth = 50; //获得元素对象。
var parent = obj.parentNode; //获得当前鼠标位置。
var mouseX = evnt.clientX; //获得元素的宽与高。
var parentSize = findPosition(parent); var parentWidth = parentSize[4];
var parentHeight = parentSize[5]; //计算出宽与高的比例。
var scale = (parentWidth / parentHeight).toFixed(1); parent.onmousedown = function () { }
document.onmousemove = function (doc) {
if (isMouseZoom) {
//设置成绝对定位,让元素可以移动。
parent.style.position = "absolute"; //获得鼠标移动后的坐标。
var currentMouseX = doc.clientX; //计算出移动后的坐标。
var moveWidth = currentMouseX - mouseX; //计算宽度增加或减少的值,增加的量等于鼠标移位的量。
var width = parent.offsetWidth + moveWidth; if (width > minWidth) {
//高度参数是:当前宽度的值 * (1 / 宽与高的比例)
var height = Math.round(width * (1 / scale)); //以元素左下角为定点,则左下角的 Y 坐标 = 当前元素的左上角的 Y 坐标 - (改变后的高度 - 改变前的高度)
var top = parent.offsetTop - (height - parentHeight); parent.style.top = top + "px";
parent.style.width = width + "px";
parent.style.height = height + "px"; mouseX = currentMouseX;
parentWidth = parent.offsetWidth;
parentHeight = parent.offsetHeight;
}
}
} document.onmouseup = function () {
isMouseZoom = false;
document.onmousemove = function () { }
parent.onmousedown = function (e) {
moveBind(parent, e);
}
};
}
以下是完整源码:
这里使用的是 jquery-1.10.2.min.js
/*要引入 jquery */ //禁止鼠标选中。
document.onselectstart = new Function("event.returnValue=false;"); var containerId = "innerContainer";
var showId = "idShow";
var moveElement = "div"; //是否元素移动。
var isMouseMove = false; //是否元素缩放。
var isMouseZoom = false; var productLists = $("#products"); //获得容器坐标。
var setContainer = findPosition(document.getElementById(containerId)); $("#ContainerWidth").attr("value", setContainer[4]);
$("#ContainerHeight").attr("value", setContainer[5]); function addElement(obj) {
var container = findPosition(document.getElementById(containerId));
var containerLeft = container[0];
var containerTop = container[1];
var containerWidth = container[4];
var containerHeight = container[5]; //设置默认宽度与高度。
var width = 50;
var height = width * (1 / (obj.offsetWidth / obj.offsetHeight)); var left = containerLeft + containerWidth / 2 - width / 2;
var top = containerTop + containerHeight / 2 - height / 2; var style = "width:" + width + "px;height:" + height + "px; left:" + left + "px;top:" + top + "px; position:absolute;background: #ff0000;";
var rightSize = "<div class='resize' onmousedown='zoomBind(this, event)'></div>";
$("#" + containerId).append("<div onmousedown='moveBind(this, event)' onmousemove=\"this.style.cursor='move'\" style='" + style + "'>" + rightSize + "</div>"); } /****************************以下是元素缩放*******************************/ function zoomBind(obj, evnt) {
isMouseZoom = true; //设置最小宽度。
var minWidth = 50; //获得元素对象。
var parent = obj.parentNode; //获得当前鼠标位置。
var mouseX = evnt.clientX; //获得元素的宽与高。
var parentSize = findPosition(parent); var parentWidth = parentSize[4];
var parentHeight = parentSize[5]; //计算出宽与高的比例。
var scale = (parentWidth / parentHeight).toFixed(1); parent.onmousedown = function () { }
document.onmousemove = function (doc) {
if (isMouseZoom) {
//设置成绝对定位,让元素可以移动。
parent.style.position = "absolute"; //获得鼠标移动后的坐标。
var currentMouseX = doc.clientX; //计算出移动后的坐标。
var moveWidth = currentMouseX - mouseX; //计算宽度增加或减少的值,增加的量等于鼠标移位的量。
var width = parent.offsetWidth + moveWidth; if (width > minWidth) {
//高度参数是:当前宽度的值 * (1 / 宽与高的比例)
var height = Math.round(width * (1 / scale)); //以元素左下角为定点,则左下角的 Y 坐标 = 当前元素的左上角的 Y 坐标 - (改变后的高度 - 改变前的高度)
var top = parent.offsetTop - (height - parentHeight); parent.style.top = top + "px";
parent.style.width = width + "px";
parent.style.height = height + "px"; mouseX = currentMouseX;
parentWidth = parent.offsetWidth;
parentHeight = parent.offsetHeight;
}
}
} document.onmouseup = function () {
isMouseZoom = false;
document.onmousemove = function () { }
parent.onmousedown = function (e) {
moveBind(parent, e);
}
};
} /****************************以上是元素缩放*******************************/ /****************************以下是元素拖动*******************************/
//绑定移动事件。
function moveBind(obj, evnt) {
isMouseMove = true; //获得元素坐标。
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.offsetWidth;
var height = obj.offsetHeight; //计算出鼠标的位置与元素位置的差值。
var cleft = evnt.clientX - left;
var ctop = evnt.clientY - top; //获得容器坐标。
var container = findPosition(document.getElementById(containerId));
var containerLeft = container[0];
var containerTop = container[1];
var containerWidth = container[4];
var containerHeight = container[5]; /*计算出容器的范围坐标。*/ //开始 X 坐标。
var startX = containerLeft;
//开始 Y 坐标。
var startY = containerTop;
//结束 X 坐标。
var maxX = startX + containerWidth - width;
//结束 Y 坐标。
var maxY = startY + containerHeight - height; //鼠标选中的元素设置成顶层。
obj.style.zIndex = getMaxIndex() + 1; //输出显示。
//show("idShow", startX, startY);
document.onmousemove = function () { }
document.onmousemove = function (doc) { if (isMouseMove) {
//计算出移动后的坐标。
var moveLeft = doc.clientX - cleft;
var moveTop = doc.clientY - ctop; //设置成绝对定位,让元素可以移动。
obj.style.position = "absolute"; //不可以超出指定的范围。
if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) {
//当移动位置在范围内时,元素跟随鼠标移动。
obj.style.left = moveLeft + "px";
obj.style.top = moveTop + "px";
} else {
/****************以下为处理当鼠标的位置不在范围内里,鼠标的移动,里面的元素也要跟着移动*****************/
//向右移动时,如果移动坐标没有大于最大 X 坐标,则移动,否则设置成最大 X 坐标的值。
if (moveLeft >= startX && moveLeft <= maxX) {
obj.style.left = moveLeft + "px";
} else if (moveLeft > maxX) {
obj.style.left = maxX + "px";
} else if (moveLeft < startX) {
obj.style.left = startX + "px";
} //向下移动时,如果移动坐标没有大于最大 Y 坐标,则移动,否则设置成最大 Y 坐标的值。
if (moveTop >= startY && moveTop <= maxY) {
obj.style.top = moveTop + "px";
} else if (moveTop > maxY) {
obj.style.top = maxY + "px";
} else if (moveTop < startY) {
obj.style.top = startY + "px";
}
} var objX = obj.offsetLeft - startX;
var objY = obj.offsetTop - startY; var inputValue = obj.getElementsByTagName("input")[0]; inputValue.value = objX + "," + objY + "," + width + "," + height; show(showId, moveLeft, moveTop);
}
} document.onmouseup = function () {
isMouseMove = false;
document.onmousemove = function () { }
};
} //获得元素的坐标与大小。
function findPosition(oElement) {
var x2 = 0;
var y2 = 0;
var width = oElement.clientWidth;
var height = oElement.clientHeight;
//alert(width + "=" + height);
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
return [posX, posY, x2, y2, width, height]; } else {
x2 = oElement.x + width;
y2 = oElement.y + height;
return [oElement.x, oElement.y, x2, y2, width, height];
}
} //获得最大 Z 坐标。
function getMaxIndex() {
var index = 0;
var ds = document.getElementById(containerId).getElementsByTagName(moveElement);
var length = document.getElementById(containerId).getElementsByTagName(moveElement).length; for (var loop = 0; loop < length; loop++) {
if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex;
} return parseInt(index);
} //显示坐标信息。
function show(id, x, y) {
document.getElementById(id).innerHTML = "left:" + x + ";top:" + y;
} /*****************************以上是元素拖动*******************************/
完整CSS:
.resize {
width: 7px;
height: 7px;
background-color: #ddd;
border: 1px solid #000;
top: -5px;
right: -5px;
position: absolute;
cursor: ne-resize;
} #mainContainer {
border: 10px solid #990000;
width: 600px;
height: 300px;
} #innerContainer {
width: 100%;
height: 100%;
} #Drag {
/*border: 5px solid #C4E3FD;*/
background: #C4E3FD;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
z-index:;
} #Drag2 {
/*border: 5px solid #C4E3FD;*/
background: #ff0000;
width: 80px;
height: 80px;
top: 50px;
left: 50px;
z-index:;
/*background: url(http://pic.cnitblog.com/face/614265/20140725231849.png) no-repeat;*/
}
完整 HTML:
<div id="mainContainer">
<div id="innerContainer">
</div>
</div> <br />拖放状态:<span id="idShow">未开始</span>
<br /><span id="testShow"></span>
<div>
<img src="http://pic.cnitblog.com/face/614265/20140725231849.png" onclick="addElement(this)" />
</div>
使用JS制作一个鼠标可拖的DIV(四)——缩放的更多相关文章
- 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动
这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...
- 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动
使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...
- 使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV
当DIV元素里,存在图片元素的时候,会使拖动出现异常. 因为图片元素本身就支持拖动,所以,只要在图片标签加入:draggable='false'. 如下: <div onmousedown=&q ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 用js写一个鼠标坐标实例
HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></spa ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
随机推荐
- matlab的&和&&操作
A&B(1)首先判断A的逻辑值,然后判断B的值,然后进行逻辑与的计算.(2)A和B可以为矩阵(e.g. A=[1 0],B=[0 0]).A&&B(1)首先判断A的逻辑值,如果 ...
- YARN应用场景、原理与资源调度
1.Hadoop YARN产生背景 源于MapReduce1.0 运维成本 如果采用“一个框架一个集群”的模式,则可能需要多个管理员管理这些集群,进而增加运维成本,而共享模式通常需要少数管理员即可完成 ...
- Java访问USB设备
最近在用Java访问RDing设备,使用的是Java HID API.使用过程中发现一个问题,由于是嵌入式小白,不知道如何向USB设备发送report.于是想到可以看看自带的软件如何访问USB的.找到 ...
- 《Java数据结构与算法》笔记-CH4-1栈的实现
class StackX{ private int maxSize; private long[] stackArray; private int top; public StackX(int siz ...
- 非常实用的Ubuntu常用终端命令
先介绍关于文件和目录的命令: ls 列出当前目录文件(不包括隐含文件) ls -a 列出当前目录文件(包括隐含文件) ls -l 列出当前目录下文件的详细信息 cd .. 回当前目录的上一级目录 cd ...
- 关于tomcat不支持put方式的解决方式
在jetty中是支持put方式操作的,在tomcat中默认是不支持的,解决方式很简单,在web.xml中添加一个过滤器即可. <filter> <filter-name>htt ...
- Spring SimpleJdbcTemplate Querying examples
Here are few examples to show how to use SimpleJdbcTemplate query() methods to query or extract data ...
- codeforces 624A Save Luke(水题)
A. Save Luke time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- Running Solr with Maven
Solr is an open source search server which is built by using the indexing and search capabilities of ...
- 【JDBC】百万数据插入
使用JDBC连接数据库时,如果插入的数据量大,一条一条地插入数据会变得非常缓慢.此时,我们需要用到预处理. 查阅Java开发文档,我们可以看到: 接口 PreparedStatement 表示预编译的 ...