<!DOCTYPE html> <html lang="zh-CN"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BWIKI可折叠悬浮窗</title>

</head> <body>

BWIKI可折叠悬浮窗示例

这是一个演示页面，展示如何在BWIKI中创建可折叠悬浮窗。右侧的悬浮窗可以折叠、展开和拖动。

悬浮窗功能

点击右上角按钮可以折叠/展开内容
拖动标题栏可以移动悬浮窗位置
内容区域支持滚动
响应式设计，适应不同屏幕尺寸

在BWIKI中的使用

在BWIKI中，你可以将这段代码添加到页面中，或者通过自定义JS/CSS功能实现类似效果。

BWIKI悬浮窗

−

快速导航

编辑提示

请遵守社区编辑规范，确保内容准确性和客观性。

使用正确的Markdown或Wiki语法进行编辑。

统计数据

页面总数: 1,234

活跃编辑者: 56

今日编辑: 23

   <script>
       // 获取DOM元素
       const floatingWindow = document.getElementById('floatingWindow');
       const toggleButton = document.getElementById('toggleButton');
       const windowHeader = document.getElementById('windowHeader');
       
       // 折叠/展开功能
       toggleButton.addEventListener('click', function() {
           floatingWindow.classList.toggle('collapsed');
           toggleButton.textContent = floatingWindow.classList.contains('collapsed') ? '+' : '−';
       });
       
       // 拖动功能
       let isDragging = false;
       let currentX;
       let currentY;
       let initialX;
       let initialY;
       let xOffset = 0;
       let yOffset = 0;
       
       windowHeader.addEventListener('mousedown', dragStart);
       document.addEventListener('mousemove', drag);
       document.addEventListener('mouseup', dragEnd);
       
       function dragStart(e) {
           initialX = e.clientX - xOffset;
           initialY = e.clientY - yOffset;
           
           if (e.target === windowHeader || e.target === toggleButton) {
               isDragging = true;
           }
       }
       
       function drag(e) {
           if (isDragging) {
               e.preventDefault();
               currentX = e.clientX - initialX;
               currentY = e.clientY - initialY;
               
               xOffset = currentX;
               yOffset = currentY;
               
               setTranslate(currentX, currentY, floatingWindow);
           }
       }
       
       function setTranslate(xPos, yPos, el) {
           el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
       }
       
       function dragEnd(e) {
           initialX = currentX;
           initialY = currentY;
           isDragging = false;
       }
       
       // 初始化悬浮窗位置
       setTranslate(0, 0, floatingWindow);
   </script>

</body> </html>

11

WIKI功能

目录