
原理与鼠标拖动 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 = "
";
CSS样式是:

以下是完整源码:
这里使用的是 jquery-1.10.2.min.js

asdfgl
发表于 2020-9-28
评论列表
加载数据中...