弹出框移动、放大、缩小、最大化处理

愤怒的小青春

已于 2022-11-23 14:29:22 修改

阅读量4.7k

点赞数

分类专栏： ES6 文章标签： html css javascript

于 2018-07-26 15:23:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30114149/article/details/81220850

版权

ES6 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现网页元素拖拽及缩放的方法，包括获取视口尺寸、实现弹窗移动和缩放功能等。适用于需要用户交互调整页面元素位置和大小的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getViewportSize() {
    //可视区域的宽度和高度
    return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    };
}

class LayerMove {
    /**
     * 弹层移动
     * @param $setCanMoveAreaName 鼠标点击哪个区域可以移动容器
     * @param $moveContainerName 要移动的容器
     */
    static execute($setCanMoveAreaName, $moveContainerName, $iframe) {
        let viewport = getViewportSize();
        $setCanMoveAreaName.mousedown(function (e) {
            e.stopPropagation();
            e.preventDefault();
            let x = e.clientX - $moveContainerName.offset().left;
            let y = e.clientY - $moveContainerName.offset().top;
            $(`#${$iframe}`).find('iframe')[0].contentWindow.init(x, y);
            $(document).mousemove(function (e) {
                let left = e.clientX - x;
                let top = e.clientY - y;
                let currentLeft = viewport.width - $moveContainerName.width();
                let currentTop = viewport.height - $moveContainerName.height();
                left = left < 0 ? 0 : left;
                left = left > currentLeft ? currentLeft : left;
                top = top < 0 ? 0 : top;
                top = top > currentTop ? currentTop : top;
                $moveContainerName.css({left: left + "px", top: top + "px"});
            });
            $(document).mouseup(function () {
                $(this).unbind("mousemove");
                $(`#${$iframe}`).find('iframe')[0].contentWindow.removeMouseMove();
                $(document).unbind("mouseup");
            });
        });
    }
}

/**
 *
 */
class LayerZoom {

    static execute($zoomContainerName, isEnlarge) {
        if (isEnlarge) {
            $zoomContainerName.css({position: "absolute", left: 0, top: 0, width: "100%", height: "100%"});
        } else {
            $zoomContainerName.css({position: "absolute", left: "15%", top: "15%", width: "70%", height: "70%"});
        }
    }

}

class LayerHandZoom {
    static execute($setCanZoomAreaName, $moveContainerName) {
        let viewport = getViewportSize();
        $setCanZoomAreaName.mousedown(function (e) {
            let x = e.clientX - $moveContainerName.width();
            let y = e.clientY - $moveContainerName.height();
            $(document).mousemove(function (e) {
                let width = e.clientX - x + "px";
                let height = e.clientY - y + "px";
                width = width < 0 ? 0 : width;
                width = width > viewport.width ? viewport.width : width;
                height = height < 0 ? 0 : height;
                height = height > viewport.height ? viewport.height : height;
                $moveContainerName.css({width: width, height: height});
            });
            $(document).mouseup(function () {
                $(document).unbind("mousemove");
            });
        });
    }
}

https://www.nowcoder.com