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

代码语言：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 justify-between z-20 shadow-sm">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-orange-600 rounded flex items-center justify-center text-white font-bold text-lg">P</div>
            <h1 class="font-semibold text-lg tracking-tight">WebSlides <span class="text-xs text-blue-600 bg-blue-50 px-1 rounded border border-blue-100">Smooth</span></h1>
        </div>

        <div class="flex items-center gap-4">
            <div class="flex bg-gray-100 p-1 rounded-lg gap-1">
                <button onclick="addTextElement()" class="w-9 h-9 flex items-center justify-center hover:bg-white rounded transition text-gray-700" title="文本"><i class="fas fa-font"></i></button>
                <button onclick="addShapeElement('rect')" class="w-9 h-9 flex items-center justify-center hover:bg-white rounded transition text-gray-700" title="矩形"><i class="fas fa-vector-square"></i></button>
                <button onclick="addShapeElement('circle')" class="w-9 h-9 flex items-center justify-center hover:bg-white rounded transition text-gray-700" title="圆形"><i class="far fa-circle"></i></button>
                <label class="w-9 h-9 flex items-center justify-center hover:bg-white rounded transition text-gray-700 cursor-pointer" title="图片">
                    <i class="fas fa-image"></i>
                    <input type="file" id="img-upload" class="hidden" accept="image/*" onchange="handleImageUpload(this)">
                </label>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <label for="pptx-import" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded cursor-pointer transition">
                导入
                <input type="file" id="pptx-import" class="hidden" accept=".pptx" onchange="importPPTX(this).........完整代码请登录后点击上方下载按钮下载查看