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-rotate3 番目と 4 番目のステップを確認してください。が-欠落しているため、正常に機能しません。

<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 に答える