impress.js 超炫酷的浏览器网页幻灯片插件

impress.js 超炫酷的浏览器网页幻灯片插件,可以直接在线运行编辑

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["impress", "impress"], function() {
                if ("ontouchstart" in document.documentElement) {
                    document.querySelector(".hint").innerHTML = "<p>请左右滑动来切换</p>";
                }
                impress().init();
            });
        });
    </script>
</head>
<body>
    <div class="fallback-message">
        <p>
            Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.
        </p>
        <p>
            For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.
        </p>
    </div>
    <div id="impress">
        <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
            <q>难道你不觉得所有这些幻灯片的演示文稿都很<b>无聊吗?</b></q>
        </div>
        <div class="step slide" data-x="0" data-y="-1500">
            <q>难道你不认为<strong>现代浏览器</strong>中给出的演示文稿不应该<strong>复制</strong>“经典”的幻灯片模板的限制?</q>
        </div>
        <div class="step slide" data-x="1000" data-y="-1500">
            <q>你想用你的演讲令人惊叹的<strong>可视化</strong>给你的观众<strong>留下深刻印象吗?</strong></q>
        </div>
        <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
            <span class="try">你应该使用</span>
            <h1>impress.js<sup>*</sup></h1>
            <span class="footnote"><sup>*</sup> 无韵意</span>
        </div>
        <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
            <p>
                这是一个<strong>演示工具</strong>
                受<a href="http://prezi.com">prezi.com</a>背后的想法。
                <strong>基于CSS3转换</strong>在如今的浏览器中。
            </p>
        </div>
        <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
            <p>
                想象你的 <b>大</b> <span class="thoughts">想法</span>
            </p>
        </div>
        <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
            <p>
                和 <b>小</b> 想法
            </p>
        </div>
        <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
            <p>
                通过 <b class="positioning">定位</b>, <b class="rotating">旋转</b> 和 <b class="scaling">缩放</b> 它们在一个无限的画板上
            </p>
        </div>
        <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
            <p>
                唯一 <b>限制</b> 你的是你的 <b class="imagination">想象力</b>
            </p>
        </div>
        <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
            <p>
                想知道更多?
            </p>
            <q><a href="http://github.com/bartaz/impress.js">使用源</a>, Luke!</q>
        </div>
        <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
            <p>
                one more thing...
            </p>
        </div>
        <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
            <p>
                <span class="have">你</span> <span class="you">已经</span> <span class="noticed">注意到</span> <span class="its">它</span> <span class="in">在</span> <b>3D中<sup>*</sup></b>?
            </p>
            <span class="footnote">* 击败它,prezi ;)</span>
        </div>
        <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"></div>
    </div>
    <div class="hint">
        <p>
            使用空格键或箭头键导航
        </p>
    </div>
</body>
</html>

官网 https://github.com/impress/impress.js

立即下载impress.js查看所有js插件

网友评论0

程序员在线工具箱