 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 紙芝居的表示
|
・サイトマップ [Shift-S] |
 |
■ 紙芝居的表示：kl_sla_flip_...
紙芝居のように各ページを順番に自動で表示できます。
これは前項自動スクロール・自動ページ移動：kl_sla_...
でスクロールをさせない場合と同一です。
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<!-- 前後ページの指定はHTMLだけでもOKです。-->
<a href="next.html" id="kl_next">次のページへ</a>
<a href="prev.html" id="kl_prev">前のページへ</a>
<!-- 紙芝居モードの開始と停止。-->
<a href="javascript:void(0)" onclick="kl_sla_flip_start(1); return false;">紙芝居開始</a>
<a href="javascript:void(0)" onclick="kl_sla_flip_stop(); return false;">紙芝居停止</a>
<!-- 自動ナビゲーション用関数が使えます。-->
<a href="javascript:void(0)" onclick="kl_sla_accelerate(1); return false;">順方向加速 [G]</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(-1); return false;">逆方向加速 [T]</a>
<!-- 前後ページへのリンクはスクリプトでも可能です。 -->
<a href="javascript:void(0)" onclick="kl_sec_move(1); return false;">次のページへ [H]</a>
<a href="javascript:void(0)" onclick="kl_sec_move(-1); return false;">前のページへ [Y]</a>
【紙芝居用関数】
| kl_sla_flip_start(speed) | 紙芝居モード開始(デフォルトではspeed=-7〜+7) |
| kl_sla_flip_stop() | 紙芝居モード停止 |
| kl_sla_flip_set() | 紙芝居モードに設定
自動ナビゲーション時に スクロールせず紙芝居モードに。 |
| kl_sla_flip_clear() | 紙芝居モードをクリア |
スピードの変更は「kl_sla_flip_start(speed)」で直接指定するか 「kl_sla_accelerate(inc)」で加減速させるなどして対応します。
【紙芝居的表示 サンプルHTML】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<!-- 前後ページの指定はHTMLだけでもOKです。-->
<a href="next.html" id="kl_next">次のページへ</a>
<a href="prev.html" id="kl_prev">前のページへ</a>
<!-- 紙芝居モードの開始と停止。-->
<a href="javascript:void(0)" onclick="kl_sla_flip_start(1); return false;">紙芝居開始</a>
<a href="javascript:void(0)" onclick="kl_sla_flip_stop(); return false;">紙芝居停止</a>
<!-- 自動ナビゲーション用関数が使えます。-->
<a href="javascript:void(0)" onclick="kl_sla_accelerate(1); return false;">順方向加速 [G]</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(-1); return false;">逆方向加速 [T]</a>
<!-- 前後ページへのリンクはスクリプトでも可能です。 -->
<a href="javascript:void(0)" onclick="kl_sec_move(1); return false;">次のページへ [H]</a>
<a href="javascript:void(0)" onclick="kl_sec_move(-1); return false;">前のページへ [Y]</a>
好みの時間間隔で実行させたい場合は時間間隔を保持した配列 「KL_SLA_STIME」をカスタマイズします。
KL_SLA_STIME = new Array(60000[ミリ秒],30000,10000,...)
自動ナビゲーションの詳細については前項自動スクロール・自動ページ移動：kl_sla_... を参照。
前後ページへのURL管理が面倒な場合は 上の例の様に「kl_sec_move(+-1)」を使えます。
実装サンプル：
写真集(fullscreen)
|
【JavaScript@Keynavi.Net ：
ナビゲーション編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 紙芝居的表示
|
・サイトマップ [Shift-S] |