3

私は HTML の知識がほとんどないので、これはおそらく非常に些細な質問です。私は本当に助けていただければ幸いです！

LaTeX ビーマー クラスでプレゼンテーションを作成しているとき、非常に便利なコマンドがあります。

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

これにより、たとえば Powerpoint のように、マウスクリックまたは前後の矢印の後に段階的に表示される 3 つの箇条書きが作成されます。

非常に長いリスト、おそらく 50 を超えるアイテムの .html ファイルに同じ機能を持たせたいと思います。したがって、実際にはスライド環境では機能せず、下にスクロールするブラウザーでのみ機能します。

HTMl5、jQuery、またはその他の方法でこれを達成する簡単な方法はありますか? Google で検索すると、何千ものプレゼンテーション ツールが表示されますが、どこから始めればよいかわかりません。

4

1 に答える 1

1

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).

于 2011-06-30T09:22:28.547 に答える