Reveal.js

高级特性完整展示

使用方向键导航 | 按 S 查看演讲者备注 | 按 ESC 查看概览

今天的内容

  • Fragment 动画效果
  • 代码高亮演示
  • 自动动画 (Auto-Animate)
  • 垂直嵌套幻灯片
  • 数学公式支持
  • 多种布局展示

第一部分

Fragment 动画

基础 Fragment 效果

  • 淡入效果(默认)
  • 从下向上
  • 从上向下
  • 从右向左
  • 从左向右

强调效果

  • 放大
  • 缩小
  • 删除线
  • 红色高亮
  • 蓝色高亮
  • 绿色高亮

自定义顺序

我第三个出现

我第一个出现

我第二个出现

第二部分

代码高亮

Python 代码示例


def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 调用示例
result = fibonacci(10)
print(f"第10个斐波那契数是: {result}")
                

分步高亮代码


// 定义函数
function greet(name) {
    
    // 生成问候语
    const message = `Hello, ${name}!`;
    console.log(message);
    
    // 返回结果
    return message;
}
                

第三部分

自动动画

Auto-Animate 演示

标题会移动

Auto-Animate 演示

位置和颜色平滑过渡

代码演进


let count = 0;
                

代码演进


let count = 0;

function increment() {
    count++;
    console.log(count);
}

increment();
                

第四部分

垂直导航

主题:性能优化

按 ↓ 深入了解各个技术

  • 缓存策略
  • 代码压缩
  • 懒加载

缓存策略


// 简单的内存缓存
const cache = new Map();

function memoize(fn) {
    return (...args) => {
        const key = JSON.stringify(args);
        if (!cache.has(key)) {
            cache.set(key, fn(...args));
        }
        return cache.get(key);
    };
}
                    

代码压缩

压缩前

  • 文件大小: 500KB
  • 加载时间: 2.5s

压缩后

  • 文件大小: 150KB
  • 加载时间: 0.8s

懒加载


// 图片懒加载示例
const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            imageObserver.unobserve(img);
        }
    });
});

images.forEach(img => imageObserver.observe(img));
                    

第五部分

数学公式

行内公式

爱因斯坦的质能方程:$E = mc^2$

勾股定理:$a^2 + b^2 = c^2$

块级公式

二次方程求根公式:

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

积分示例:

$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

第六部分

多种布局

双列布局

优点 ✅

  • 易于使用
  • 功能强大
  • 高度可定制

注意事项 ⚠️

  • 需要现代浏览器
  • 学习曲线适中

图文混排

左侧文字说明

  • 清晰的视觉层次
  • 平衡的内容分布
  • 专业的展示效果
示例图形
"任何足够先进的技术都与魔法无异。"
— Arthur C. Clarke

特性总结

  • ✅ Fragment 渐进式显示
  • ✅ 代码语法高亮(190+ 语言)
  • ✅ Auto-Animate 平滑过渡
  • ✅ 垂直嵌套导航
  • ✅ KaTeX 数学公式
  • ✅ 多种专业布局
  • ✅ 演讲者备注
  • ✅ 完全自定义

快捷键提示

→ / Space 下一张
← 上一张
S 演讲者视图
ESC 概览模式
F 全屏
? 帮助

谢谢!

Reveal.js - 让演示更精彩

📚 文档: revealjs.com
💻 GitHub: github.com/hakimel/reveal.js