3

我的 HTML 知识很少，所以这可能是一个非常微不足道的问题。我真的很感激任何帮助！

当我使用 LaTeX beamer 类创建演示文稿时，有一个非常有用的命令：

\begin{itemize} 
\item<x-> Alpha
\item<x-> Beta
\item<x-> Gamma  
\end{itemize}

这会创建三个项目符号点，这些项目符号点会在鼠标单击或向前/向后箭头之后逐渐出现，例如在 Powerpoint 中。

我想在 .html 文件中为非常长的列表（可能超过 50 个项目）提供相同的功能。所以它真的不能在幻灯片环境中工作，而只能在浏览器中向下滚动。

有没有一种简单的方法可以使用 HTMl5 或 jQuery 或其他方式来实现这一点？谷歌搜索抛出了数以千计的演示工具，我真的不知道从哪里开始。

4

1 回答 1

1

使用 jQuery，您可以将keypress事件绑定到窗口，并在每次按下键时显示下一个列表项：

var curIndex = 0;
$(window).keypress(function() {
   $("li").eq(curIndex).show();
   curIndex++;
});

要仅使用箭头键进行此操作，需要稍作更改（您需要使用keydown而不是keypress）：

var curIndex = 0;
$(window).keydown(function(e) {
    if(e.keyCode === 37) {
        if(curIndex > 0) curIndex--;
        $("li").eq(curIndex).hide();
    }
    else if(e.keyCode === 39) {
        $("li").eq(curIndex).show();
        if(curIndex < 3) curIndex++; 
    }
});

您的 HTML 列表将如下所示：

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

默认情况下需要隐藏列表项，使用类似于li { display:none }CSS 中的内容。

另请注意，上面的示例未处理显示最后一个元素的情况 - 您打算在这种情况下发生什么？

这是一个显示此操作的示例小提琴（您需要单击“结果”框架以使其获得焦点，然后按任意键以触发事件处理程序）。

于 2011-06-30T09:22:28.547 回答