技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] 自動スクロール・自動ページ移動 ・サイトマップ [Shift-S]

■ 自動スクロール・自動ページ移動:kl_sla_...

自動でページを上下にスクロールさせます。

ページの最前/後部に達してスクロールしきれなくなった時、 前後ページの指定「KL_SEC_NEXT/PREV="url"」の指定があれば 自動で次のページに移動します。スピードの指定も引き継がれます。

前後ページの指定はスクリプトで 「KL_SEC_NEXT/PREV="url"」を実行する、或いは既に 前後へのリンクがあれば idかname値を以下の様に追加すればOKです。
「<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」は −7〜7 ですが、変更したい場合は 配列「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-矢印」でフォーカスを上下左右に移動できます。

  - スクロール位置取得:kl_slx/y()
  - スクロール実行:kl_slto/by()
  - 自動スクロール・自動ページ移動:kl_sla_...
  - 紙芝居的表示:kl_sla_flip_...
  - 前後節,ページへの移動:kl_sec_move()
  - スクロール位置付URL:kl_urlat_get()
  - 戻る/進む/再読込みの実行

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] 自動スクロール・自動ページ移動 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─