html+css实现可拖动 可放大 缩小 关闭的聊天窗口

幸福小宝
638 阅读2分钟

纯原生实现拖拽窗口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>窗口</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .draggable-resizable-window {
        position: absolute;
        border: 1px solid #ccc;
        background-color: #fff;
        overflow: hidden;
        resize: both;
        cursor: move;
      }

      .header {
        background-color: #f1f1f1;
        padding: 10px;
        cursor: move;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .title {
        font-weight: bold;
      }

      .close-btn {
        background-color: #f44336;
        color: white;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
      }

      .close-btn:hover {
        background-color: #e74c3c;
        color: white;
      }
      .content {
        height: 300px;
        width: 400px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="draggable-resizable-window">
      <div class="header">
        <span class="title">窗口</span>
        <button class="close-btn">关闭</button>
      </div>
      <div class="content">
        <!-- 在这里添加你的页面内容 -->
      </div>
    </div>
    <script>
      const draggableWindow = document.querySelector(
        ".draggable-resizable-window"
      );
      const header = draggableWindow.querySelector(".header");
      const closeBtn = draggableWindow.querySelector(".close-btn");
      let isDragging = false;
      let startX, startY, initialOffsetX, initialOffsetY;

      header.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        initialOffsetX = draggableWindow.offsetLeft;
        initialOffsetY = draggableWindow.offsetTop;
      });

      document.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        const newOffsetX = initialOffsetX + dx;
        const newOffsetY = initialOffsetY + dy;
        const maxWidth = window.innerWidth - draggableWindow.offsetWidth;
        const maxHeight = window.innerHeight - draggableWindow.offsetHeight;
        const newLeft = Math.min(Math.max(newOffsetX, 0), maxWidth);
        const newTop = Math.min(Math.max(newOffsetY, 0), maxHeight);
        draggableWindow.style.left = `${newLeft}px`;
        draggableWindow.style.top = `${newTop}px`;
      });

      document.addEventListener("mouseup", () => {
        isDragging = false;
      });

      closeBtn.addEventListener("click", () => {
        draggableWindow.remove();
      });
    </script>
  </body>
</html>

image.png

如需要设置在右下角,设置css样式即可

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .draggable-resizable-window {
        position: fixed;
        right: 0;
        bottom: 0;
        border: 1px solid #ccc;
        background-color: #fff;
        overflow: hidden;
        width: 390px;
        height: 350px;
      }

      .header {
        background-color: #f1f1f1;
        padding: 10px;
        cursor: move;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .title {
        font-weight: bold;
      }

      .close-btn {
        background-color: #f44336;
        color: white;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
      }

      .close-btn:hover {
        background-color: #e74c3c;
        color: white;
      }
    </style>

可拖动、可放大、缩小、关闭的聊天窗口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可拖动、可放大、缩小、关闭的聊天窗口</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .draggable-resizable-window {
        user-select: none;
        position: fixed;
        right: 0;
        bottom: 0;
        border: 1px solid #ccc;
        background-color: #fff;
        overflow: hidden;
        width: 390px;
        height: 350px;
      }

      .header {
        background-color: #f1f1f1;
        cursor: move;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
      }

      .title {
        font-weight: bold;
      }

      .square {
        margin: 0 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      .jian {
        width: 20px;
        height: 25px;
        cursor: pointer;
      }
      .reset {
        width: 20px;
        height: 25px;
        cursor: pointer;
      }
      .onLine {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100px;
        width: 30px;
        margin: auto;
      }

      .jianafter {
        position: fixed;
        bottom: 0;
        width: 350px;
        right: 0;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <!-- 拖拽窗口 -->
    <div class="draggable-resizable-window">
      <div class="header">
        <span class="title">窗口</span>
        <div style="display: flex; align-items: center">
          <img class="jian close-btn1" src="./img/chat/jian.svg" alt="" />
          <img class="square" src="./img/chat/square.svg" alt="" />
          <img class="jian close-btn2" src="./img/chat/x.svg" alt="" />
        </div>
      </div>
      <div class="content">
        <!-- 在这里添加你的页面内容 -->
      </div>
    </div>
    <!-- 咨询 -->
    <button class="onLine" onclick="show()">
      <div>在</div>
      <div>线</div>
      <div>咨</div>
      <div>询</div>
    </button>

    <!-- 最小化之后显示页面 -->
    <div class="header jianafter">
      <span class="title">窗口</span>
      <div style="display: flex; align-items: center">
        <img class="reset" src="./img/chat/reset.svg" alt="" />
      </div>
    </div>

    <script>
      const draggableWindow = document.querySelector(
        ".draggable-resizable-window"
      );
      const jianafter = document.querySelector(".jianafter");
      const reset = document.querySelector(".reset");
      jianafter.remove();
      const header = draggableWindow.querySelector(".header");
      const closeBtn1 = document.querySelector(".close-btn1");
      const closeBtn2 = document.querySelector(".close-btn2");
      const square = document.querySelector(".square");
      let isDragging = false;
      let startX, startY, initialOffsetX, initialOffsetY;

      header.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        initialOffsetX = draggableWindow.offsetLeft;
        initialOffsetY = draggableWindow.offsetTop;
      });

      document.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        const newOffsetX = initialOffsetX + dx;
        const newOffsetY = initialOffsetY + dy;
        const maxWidth = window.innerWidth - draggableWindow.offsetWidth;
        const maxHeight = window.innerHeight - draggableWindow.offsetHeight;
        const newLeft = Math.min(Math.max(newOffsetX, 0), maxWidth);
        const newTop = Math.min(Math.max(newOffsetY, 0), maxHeight);

        draggableWindow.style.left = `${newLeft}px`;
        draggableWindow.style.top = `${newTop}px`;
      });

      document.addEventListener("mouseup", () => {
        isDragging = false;
      });

      closeBtn1.addEventListener("click", () => {
        draggableWindow.style.display = "none";
        document.body.appendChild(jianafter);
      });
      closeBtn2.addEventListener("click", () => {
        draggableWindow.style.display = "none";
      });

      square.addEventListener("click", () => {
        window.open("./chat.html");
      });

      reset.addEventListener("click", () => {
        draggableWindow.style.display = "block";
        draggableWindow.style.left = `calc(100% - 392px)`;
        draggableWindow.style.top = `calc(100% - 352px)`;
        jianafter.remove();
      });

      const show = () => {
        jianafter.remove();

        draggableWindow.style.display = "block";
        draggableWindow.style.left = `calc(100% - 392px)`;
        draggableWindow.style.top = `calc(100% - 352px)`;
      };
    </script>
  </body>
</html>

image.png

image.png 需要去iconfont自己找窗口的图标

完美结束

avatar
文章
阅读
粉丝