 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 自動スクロール・自動ページ移動
|
・サイトマップ [Shift-S] |
 |
■ 自動スクロール・自動ページ移動：kl_sla_...
自動でページを上下にスクロールさせます。
KL_SLA_SCROLL = 1; //スクロールする(偽の場合 次のページへの移動のみ実行)
KL_SLA_NOTIFY = 1; //現在のスピードや次ページ情報をkl_status()で表示
KL_SLA_MSTOP = 1; //マウスクリックで停止
KL_SLA_KSTOP = 1; //何かキーが押されたら停止(T/G以外)
KL_SLA_SPEED = 1; //デフォルトのスピード(-7〜+7：下記参照)
KL_SLA_STEP = new Array( 1, 1, 1, 1, 2, 4, 8); //kl_slby()の移動量(px)
KL_SLA_IVL = new Array(100,50,25,12,12,12,12); //kl_slby()の呼出し間隔(ミリ秒)
KL_SLA_STIME = new Array(60000,30000,10000,7000,5000,3000,1000);
//最後部に移動してスクロールしきれなくなったら指定時間後に
//次のページに移動（KL_SLA_USE_SHR=偽の場合に利用）
KL_SLA_USE_SHR= 1; //最後部に達しスクロールしきれなくなった時に 次のページに
KL_SLA_SHR = 0.5; //移動するまでの時間を (ウィンドウの高さ*SHR/Speed)で算出
<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_start(1); return false;">スクロール開始</a>
<a href="javascript:void(0)" onclick="kl_sla_stop(); return false;">スクロール停止</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(1); return false;">順方向加速</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(-1); return false;">逆方向加速</a>
ページの最前/後部に達してスクロールしきれなくなった時、 前後ページの指定「KL_SEC_NEXT/PREV="url"」の指定があれば 自動で次のページに移動します。スピードの指定も引き継がれます。
前後ページの指定はスクリプトで
「KL_SEC_NEXT/PREV="url"」を実行する、或いは既に
前後へのリンクがあれば idかname値を以下の様に追加すればOKです。
「<a href="next.html" id(or name)="kl_next">次のページ</a>」
「<a href="next.html" id(or name)="kl_next">次のページ</a>」
【自動ナビゲーション関数】
| kl_sla_start(speed) | 自動ナビゲーション開始(speed=-7...7) |
| kl_sla_accelerate(inc) | 加減速
「T/G」キー入力時にinc=-1/+1で実行されています。 |
| kl_sla_stop() | 停止
マウスクリックや「Y/H」以外のキーを押した時に実行。 |
| kl_sla_toggle() | 動作・停止を切替え |
差分スクロール関数 「kl_slby(dx,dy)」をタイマー関数で連続的に呼び出し スクロールを実行しています。
以下のような定数で動作をカスタマイズできます。
【自動ナビゲーション カスタマイズ定数】
KL_SLA_SCROLL = 1; //スクロールする(偽の場合 次のページへの移動のみ実行)
KL_SLA_NOTIFY = 1; //現在のスピードや次ページ情報をkl_status()で表示
KL_SLA_MSTOP = 1; //マウスクリックで停止
KL_SLA_KSTOP = 1; //何かキーが押されたら停止(T/G以外)
KL_SLA_SPEED = 1; //デフォルトのスピード(-7〜+7：下記参照)
KL_SLA_STEP = new Array( 1, 1, 1, 1, 2, 4, 8); //kl_slby()の移動量(px)
KL_SLA_IVL = new Array(100,50,25,12,12,12,12); //kl_slby()の呼出し間隔(ミリ秒)
KL_SLA_STIME = new Array(60000,30000,10000,7000,5000,3000,1000);
//最後部に移動してスクロールしきれなくなったら指定時間後に
//次のページに移動（KL_SLA_USE_SHR=偽の場合に利用）
KL_SLA_USE_SHR= 1; //最後部に達しスクロールしきれなくなった時に 次のページに
KL_SLA_SHR = 0.5; //移動するまでの時間を (ウィンドウの高さ*SHR/Speed)で算出
自動スクロールのスピードの変更をしたい場合は KL_SLA_STEP/IVLを変更します。 デフォルトでは、例えば 「KL_SLA_SPEED=3」の場合、 「KL_SLA_IVL[3-1]=25ミリ秒」間隔で 「KL_SLA_STEP[3-1]=1px」ずつスクロールを実行します。
同様に逆方向移動時(KL_SLA_SPEED=-3)は -1pxずつスクロール
デフォルトでスピード「KL_SLA_SPEED」は −７〜７ ですが、変更したい場合は
配列「KL_SLA_STEP/IVL/STIME」のサイズを適宜変えてください。
ページの最後部や先頭に達してスクロールしきれなくなったら 「KL_SLA_USE_SHR」が偽の場合は 「KL_SLA_STIME[3-1]=10000ミリ秒=10秒」後に次のページに移動します。 真(デフォルト)の場合はページの高さと現在スピードから時間を逆算します。
SHR(StopHeightRatio)を使う場合 スピードが速ければ速く移動。
Windowの高さが低く 読み残しが少なければ
速く移動するので閲覧者側には自然です。
ウィンドウの高さを仮に600pxとします。 目線がページの真ん中にある「KL_SLA_SHR=0.5」場合、 スクロール停止後に詠み残した内容は「600*0.5=300px」分に相当。 それらを読み終わる時間を考えると 「300px/(1px/25ミリ秒)=7.5秒」が次のページに移動するまでの妥当な待機時間と 推定できます。
停止後、早く移動してしまいたい場合は「KL_SLA_SHR=0.1」など小さな値にします。
【自動スクロール サンプル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_start(1); return false;">スクロール開始</a>
<a href="javascript:void(0)" onclick="kl_sla_stop(); return false;">スクロール停止</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(1); return false;">順方向加速</a>
<a href="javascript:void(0)" onclick="kl_sla_accelerate(-1); return false;">逆方向加速</a>
次のページへの以降時間を減らしたい場合は下記の「0.1」の方を実行した後、 上のコマンドを実行するか 「G」を連打して実験してみてください。
|
【JavaScript@Keynavi.Net ：
ナビゲーション編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 自動スクロール・自動ページ移動
|
・サイトマップ [Shift-S] |