gpt4 book ai didi

html - 为什么 impress.js 不旋转

转载 作者:行者123 更新时间:2023-11-27 22:29:39 26 4
gpt4 key购买 nike

我正在弄乱 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

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

最佳答案

如果您关注 Bartaz GitHub 站点上的 index.html,您会发现在配置演示文稿时漏掉了一行。

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

从我的 Angular 来看,旋转本​​身的代码看起来不错。您只需要修改定位以及 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>

关于html - 为什么 impress.js 不旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19088192/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com