JavaScript 实现可拖动、变色及最小化关闭的浮动窗口

功能目标与准备

我们的目标是创建一个完全可控的 HTML 层窗口，具备以下特性：

• 拖拽移动：通过鼠标按下标题栏拖动窗口位置。
• 视觉反馈：拖动时窗口边框和标题栏颜色改变，释放后恢复原色。
• 状态控制：支持最小化（折叠内容区）和彻底隐藏/显示。
• 层级管理：点击窗口自动置顶，避免被其他元素遮挡。

核心实现步骤

第1步：定义窗口配置与全局状态

首先需要定义一些全局变量来跟踪鼠标的初始位置、当前窗口状态以及默认的配色方案。这有助于在拖拽事件中保持状态的一致性。

// 全局状态变量
var x0 = 0, y0 = 0; // 鼠标起始坐标
var x1 = 0, y1 = 0; // 窗口起始坐标
var moveable = false; // 是否处于拖拽状态
var hoverColor = 'orange'; // 激活/拖拽时的颜色
var normalColor = '#336699'; // 默认颜色
var zIndexCounter = 10000; // z-index 计数器，确保窗口层级

第2步：实现拖拽逻辑（开始、移动、结束）

拖拽功能的本质是监听 mousedown, mousemove, 和 mouseup 事件。我们需要锁定鼠标捕获（setCapture），以确保即使鼠标快速移出窗口边缘也能继续跟踪。

开始拖动 (startDrag)：

• 记录当前鼠标位置和窗口当前的 left/top 值。
• 将样式切换为“高亮”状态（变色）。
• 设置 moveable = true 并锁定对象捕获。

执行拖动 (drag)：

• 仅当 moveable 为真时执行。
• 计算新的坐标：newLeft = startLeft + currentMouseX - startX。
• 实时更新窗口的 style.left 和 style.top。

停止拖动 (stopDrag)：

• 恢复窗口和标题栏的正常颜色。
• 释放鼠标捕获 (releaseCapture)。
• 设置 moveable = false。

<!-- 拖拽核心函数片段 -->
function startDrag(obj){
    if(event.button==1){
        obj.setCapture();
        var win = obj.parentNode;
        var sha = win.nextSibling;
        x0 = event.clientX;
        y0 = event.clientY;
        x1 = parseInt(win.style.left);
        y1 = parseInt(win.style.top);
        normal = obj.style.backgroundColor;
        
        // 变色反馈
        obj.style.backgroundColor = hover;
        win.style.borderColor = hover;
        obj.nextSibling.style.color = hover;
        
        moveable = true;
    }
}

function drag(obj){
    if(moveable){
        var win = obj.parentNode;
        var sha = win.nextSibling;
        win.style.left = x1 + event.clientX - x0;
        win.style.top = y1 + event.clientY - y0;
        sha.style.left = parseInt(win.style.left) + offx;
        sha.style.top = parseInt(win.style.top) + offy;
    }
}

function stopDrag(obj){
    if(moveable){
        var win = obj.parentNode;
        var sha = win.nextSibling;
        var msg = obj.nextSibling;
        win.style.borderColor = normal;
        obj.style.backgroundColor = normal;
        msg.style.color = normal;
        obj.releaseCapture();
        moveable = false;
    }
}

第3步：实现最小化与隐藏功能

最小化通常指折叠主要内容区域，只保留标题栏；隐藏则是将窗口完全从视图中移除。我们通过修改 display 属性和高度来实现。

最小化逻辑 (min)：

• 检查消息区域 (msg) 当前的 display 状态。
• 如果已隐藏，则显示它并调整容器高度为 标题高度 + 边框。
• 如果已显示，则隐藏它并调整容器高度为 标题高度 + 边框。

显示/隐藏逻辑 (ShowHide)：

• 直接控制窗口主容器及其背景阴影层的 display 属性为 'none' 或空字符串（表示默认块级显示）。

// 最小化函数
function min(obj){
    var win = obj.parentNode.parentNode;
    var sha = win.nextSibling;
    var tit = obj.parentNode;
    var msg = tit.nextSibling;
    var flg = msg.style.display=="none";
    
    if(flg){
        // 展开：高度 = 消息区 + 标题 + 边框
        win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 4;
        msg.style.display = "block";
        obj.innerHTML = "0"; // 图标重置
    } else {
        // 最小化：高度 = 标题 + 边框
        win.style.height = parseInt(tit.style.height) + 4;
        msg.style.display = "none";
        obj.innerHTML = "2"; // 图标变化
    }
}

// 显示隐藏函数
function ShowHide(id, dis){
    var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis;
    document.getElementById("xMsg"+id).style.display = bdisplay;
    document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}

第4步：动态构建窗口 DOM 结构

为了方便复用，我们封装一个构造函数 xWin，传入 ID、尺寸、位置、标题和内容等参数，自动插入 HTML 到 <body> 中。

生成的结构包含：

1. 主窗口层：包含标题栏（用于拖拽）、内容区（用于显示文本）。
2. 阴影层：跟随主窗口，增加立体感。

function xWin(id, w, h, l, t, tit, msg) {
    zIndexCounter += 2;
    this.id = id;
    this.width = w;
    this.height = h;
    this.left = l;
    this.top = t;
    this.zIndex = zIndexCounter;
    this.title = tit;
    this.message = msg;
    this.bulid();
}

function bulid() {
    var str = "";
    // 构建外层 div，绑定 getFocus 事件
    str += '<div id=xMsg' + this.id + ' style=\'z-index:' + this.zIndex + ';width:' + this.width + ';height:' + this.height + ';position:absolute;...\'' + 
           'onmousedown=\'getFocus(this)\'>';
    
    // 构建标题栏 div，绑定拖拽事件
    str += '<div onmousedown=\'startDrag(this)\' onmouseup=\'stopDrag(this)\' onmousemove=\'drag(this)\' ...>';
    str += '<span>' + this.title + '</span>';
    str += '<span onclick=\'min(this)\'>0</span>'; // 最小化按钮
    str += '</div>';
    
    // 构建内容区
    str += '<div style=\'background-color:white;...\'>' + this.message + '</div>';
    str += '</div>';
    
    // 构建阴影层
    str += '<div id=xMsg' + this.id + 'bg style=\'...filter:alpha(opacity=40);...\'></div>';
    
    document.body.insertAdjacentHTML("beforeEnd", str);
}

第5步：初始化与使用

在页面加载完成后，调用构造函数创建多个实例，并通过 ShowHide 控制初始可见性。

window.onload = function initialize() {
    // 创建三个不同位置的窗口
    new xWin("1", 160, 200, 200, 200, "窗口1", "演示内容 A");
    new xWin("2", 240, 200, 100, 100, "窗口2", "演示内容 B");
    new xWin("3", 200, 160, 250, 50, "窗口3", "演示内容 C");
    
    // 隐藏窗口 1 作为演示
    ShowHide("1", "none");
};

完成判断与排错

完成判断：

• 页面加载后能看到指定数量的浮动窗口。
• 用鼠标按住蓝色标题栏拖动，窗口随鼠标移动，且颜色变为橙色。
• 松开鼠标左键，颜色恢复蓝色。
• 点击标题栏右侧的最小化符号，内容区折叠，窗口变矮。

常见排错：

• 无法拖动：检查 CSS 中是否设置了 pointer-events: none 或 user-select: none 阻断了鼠标事件，确保标题栏未被其他半透明层覆盖导致事件冒泡失败。
• 层级混乱：如果窗口被遮住，尝试手动修改 zIndex 的值，确保主窗口的 z-index 高于阴影层和其他干扰元素。
• 位置偏移：如果窗口初始位置不正确，检查 CSS 中 position: absolute 的定位父级是否正确，或者页面滚动导致 clientX 计算偏差。

简要总结

以上关于 JavaScript 实现可拖动、变色并关闭层窗口的详细内容，更多关于 JS 自定义弹窗特效的资料请关注本站其它相关文章！