使用 HTML5 或 jQuery 增加要点？

发布于 2024-11-17 15:12:13 字数 444 浏览 4 评论 0原文

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

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

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

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

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

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

原文

I have very little HTML knowledge, so this is probably a very trivial question. I would really appreciate any help!

When I'm creating presentations with the LaTeX beamer class there is the very useful command:

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

This creates three bullet points that appear incrementally after a mouseclick or forward/backward arrow like in Powerpoint for example.

I would like to have the same function in a .html file for very long lists, maybe more than 50 items. So it really wouldn't work in a slide environment, but only in a browser by scrolling down.

Is there an easy way to achieve this with HTMl5 or jQuery or some other way? Googling throws up thousands of presentation tools, and I don't really know where to begin.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

被翻牌 2024-11-24 15:12:13

使用 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 {在 CSS 中显示：无 } 。

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

这是一个示例小提琴，显示了这个操作（您需要单击“结果”框架来给出它聚焦，然后按任意键触发事件处理程序）。

With jQuery you could bind a keypress event to the window, and show the next list item every time a key is pressed:

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

To make this work with only the arrow keys, a slight change is required (you need to use keydown instead of 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++; 
    }
});

Your HTML list will look something like this:

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

The list items will need to be hidden by default, using something like li { display:none } in your CSS.

Also note that the above example does not handle the case when the last element is shown - what were you intending to happen in this case?

Here is an example fiddle showing this in action (you need to click on the "Result" frame to give it focus, then press any key to trigger the event handler).

回复收藏 0 原文

~没有更多了~