码迷，mamicode.com
首页 > Web开发 > 详细

使用JS制作一个鼠标可拖的DIV（四）——缩放

时间：2014-09-02 19:48:55      阅读：197      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   color   os   io   使用   ar   for   

原理与鼠标拖动 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: 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（四）——缩放

标签：style   blog   http   color   os   io   使用   ar   for   

原文地址：http://www.cnblogs.com/cjnmy36723/p/3952072.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！