我正在用html创建一个演示文稿.它应该像MS Office中的powerpoint.它将预览所有幻灯片,并且将在窗口上一次显示一张幻灯片.我有一个幻灯片列表,可以通过Javascript与他们一起玩.我可以将它们缩小到预览中.
关于显示的一张幻灯片: 我想知道在一个包装器div中复制所有显示的幻灯片是否更好,并通过设置display属性逐个显示它们.或者,如果将一张幻灯片一次复制到此包装器div中会更好.
为清楚起见......我得到这样的东西
<body>
<div class="slide">/*slide stuff*/</div>
<div class="slide">/*slide stuff*/</div>
<div class="slide">/*slide stuff*/</div>
<div class="slide">/*slide stuff*/</div>
</body>
我把它转换成这个
<body>
<div id=preview>
<div class="slide" id="1">/*slide stuff*/</div>
<div class="slide" id="2">/*slide stuff*/</div>
<div class="slide" id="3">/*slide stuff*/</div>
<div class="slide" id="4">/*slide stuff*/</div>
</div>
...
现在我应该通过更改显示属性来显示它们.所以html继续这样:
...
<div id="mainwindow">
<div class="slide" id="p1" display="none">/*slide stuff*/</div>
<div class="slide" id="p2" display="none">/*slide stuff*/</div>
<div class="slide" id="p3" display="none">/*slide stuff*/</div>
<div class="slide" id="p4" display="none">/*slide stuff*/</div>
</div>
</body>
或者我应该将mainwindowdiv设置为空并在每次幻灯片更改时将幻灯片复制到其中？
...
<div id="mainwindow">
</div>
</body>
对于两种解决方案的速度(如果幻灯片包装有其他标签),我将不胜感激,并且因为它是学校作业,我想知道哪种解决方案被认为是"更干净"和/或更多"专业".
element.style.display当你进入下一张幻灯片时,使用隐藏将比复制元素快得多.复制需要更改DOM,这总是比简单地隐藏元素更昂贵.
我能看到的唯一一个例子就是当你有数百张幻灯片时.页面的剪切大小可能会变慢浏览器.