首页 > 代码库 > 使用JS制作一个鼠标可拖的DIV（四）——缩放
使用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‘ onm ousedown=‘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=http://www.mamicode.com/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‘ onm ousedown=‘zoomBind(this, event)‘></div>"; $("#" + containerId).append("<div onm ousedown=‘moveBind(this, event)‘ onm ousemove=\"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 = http://www.mamicode.com/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: 2; } #Drag2 { /*border: 5px solid #C4E3FD;*/ background: #ff0000; width: 80px; height: 80px; top: 50px; left: 50px; z-index: 3; /*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（四）——缩放
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。