文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么impress.js不旋转

问为什么impress.js不旋转
EN

Stack Overflow用户

提问于 2013-09-30 06:58:58

回答 1查看 524关注 0票数 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>

最后一定要像这样。

我不知道它为什么不起作用。我们很感激你的帮助。

html

css

impress.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-09-30 07:14:02

如果您在Bartaz GitHub站点上遵循GitHub，您将看到在配置演示文稿时遗漏了一行。

<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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19088192

复制

相似问题

问为什么impress.js不旋转
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么impress.js不旋转EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么impress.js不旋转
EN