js+css实现类似PowerPoint的ppt在线拖拽可视化设计编辑导出pptx代码-html代码-BFW代码库

js+css实现类似PowerPoint的ppt在线拖拽可视化设计编辑导出pptx代码

代码语言：html

所属分类：其他

代码描述：js+css实现类似PowerPoint的ppt在线拖拽可视化设计编辑导出pptx代码

代码标签： js css 类似 PowerPoint ppt 在线拖拽可视化设计编辑导出 pptx 代

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Silky Smooth Web PPT</title>
    
    <!-- Styles -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    
    <!-- Libraries -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/interact.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pptxgen.bundle.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jszip.3.10.1.js"></script>

    <style>
        body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; user-select: none; }
        
        /* Canvas Wrapper */
        #canvas-wrapper {
            transition: transform 0.1s ease-out; /* Zoom transition */
            will-change: transform;
        }

        #slide-stage {
            width: 960px; 
            height: 540px;
            background-color: white;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
        }

        /* --- 核心流畅度优化 CSS --- */
        .slide-element {
            position: absolute;
            box-sizing: border-box;
            cursor: grab;
            border: 1px solid transparent;
            
            /* 关键：开启硬件加速 */
            will-change: transform, width, height; 
            /* 关键：默认可能有过渡，但必须确保 transforms 是瞬时的 */
            transition: border 0.1s; 
            
            /* 防止拖拽时选中内部文字 */
            touch-action: none; 
        }

        .slide-element:hover {
            border: 1px dashed #3b82f6;
        }

        .slide-element.selected {
            border: 2px solid #3b82f6;
            z-index: 100; 
        }

        /* 拖拽进行时状态 */
        .slide-element.is-dragging {
            cursor: grabbing;
            opacity: 0.9;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            z-index: 999 !important;
            transition: none !important; /* 强制关闭任何过渡 */
        }
        
        /* 调整大小时状态 */
        .slide-element.is-resizing {
            z-index: 999 !important;
            transition: none !important;
        }

        /* Sidebar Thumbnails */
        .slide-thumb {
            width: 160px; height: 90px;
            border: 2px solid transparent;
            cursor: pointer;
            flex-shrink: 0;
            position: relative;
        }
        .slide-thumb.active {
            border-color: #f97316;
            box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
        }
        
        /* UI Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
    </style>
</head>
<body class="bg-gray-100 h-screen flex flex-col text-gray-800">

    <!-- Header -->
    <header class="h-14 bg-white border-b border-gray-200 flex items-center px-4.........完整代码请登录后点击上方下载按钮下载查看