Question

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

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

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

这会创建三个子弹点，在鼠标点击或向前/向后箭头之后逐渐显示，例如在Powerpoint中。

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

有没有一种简单的方法可以通过HTMl5或jQuery或其他方式实现这一目标？谷歌搜索引发了数以千计的演示工具，我真的不知道从哪里开始。

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

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

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

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

HTML5或jQuery的增量项目符号？

1 个答案: