Question

我正在用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>

最终必须看起来像这样。 enter image description here

我不知道为什么它不起作用。感谢帮助。

Answer 1

如果您按照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>

为什么impress.js不会旋转

1 个答案: