2

我有点搞乱了impress.js。我想要 4 张幻灯片，想让它看起来像中间有一个正方形。

我的代码如下所示：

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

它最终必须看起来像这样。在此处输入图像描述

我不知道为什么它不起作用。帮助表示赞赏。

4

1 回答 1

3

如果您关注 Bartaz GitHub 站点上的 index.html，您会看到，您在配置演示文稿时遗漏了一行。

<script src="js/impress.js"></script> //add this line and edit the path accordingly
<script>impress().init();</script>

从我的角度来看，旋转本​​身的代码看起来不错。您只需要修改定位以及 x 和 y 轴。

亲切的问候

//编辑：检查你data-rotate的第三和第四步。丢失了-，因此它不起作用，就像它应该的那样。

<div id="impress">
        <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
            <p style="font-size:36px;">This is my first slide.</p>
        </div>
        <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
            <p style="font-size:36px;">This is my second slide.</p>
        </div>
        <div id="3von4" class="step slide" data-x="0" data-y="1800" data-rotate="180">
            <p style="font-size:36px;">This is my third slide.</p>
        </div>
        <div id="4von4" class="step slide" data-x="-950" data-y="950" data-rotate="270">
            <p style="font-size:36px;">This is my fourth slide.</p>
        </div>
    </div>
于 2013-09-30T07:14:02.050 回答