Div の領域を Scroll In, Scroll Out させる ver.0.0.1
div を mouseover, mouseout で Scroll In Scroll Out させる JavaScript. 基本動作として、mouseover で open, mouseout で close と動作の方向を決めて、描画の全体の時間内に必要移動距離を処理ステップ数で割ることで差分距離を決めて、初期位置から終了位置まで style を書き換え続けるという簡単なもの．
スタイルの書き換えは setTimeout を使って行なっている．ただし，コールバック関数うんたらみなたいなまともな使い方はしていない，とおもう．
var div;
var timer_count = 0; // マウスの出入り
var scroll_count = 0;
var scroll_dir = 1; // 1: open, -1:close
var timer; // 動作中の timer メソッドの有無の確認のため？
area_in = function(area) { // エリア内に入ったときの動作
if(timer) {
clearTimeout(timer);
}
div = area;
timer_count = 0;
scroll_dir = 1;
timer = setTimeout("area_inout_count()",100);
};
area_inout_count = function() { // エリア内の出入りのマージン
timer_count += 1;
if(timer_count <= 10) {
timer = setTimeout("area_inout_count()",50);
} else {
timer = setTimeout("scroll_panel()",50);
}
};
area_out = function(e) { // エリア外に出たときの動作
if(timer) {
clearTimeout(timer);
}
scroll_dir = -1;
timer_count = 0;
timer = setTimeout("area_inout_count()",100);
};
scroll_panel = function() { // scroll 描画部分
var dy = 2 * scroll_count - 100;
div.style.bottom = dy;
if((scroll_dir == 1 && scroll_count < 50) ||
(scroll_dir == -1 && scroll_count > 0)) {
scroll_count += scroll_dir;
time = setTimeout("scroll_panel()",50);
}
}
作成時に timer の扱いでちょっと困ったのは、単純に setTimer だけでメソッドの登録をして適当に終わるだろうと思っていたところ、div を scroll させるメソッドがゴーストのように残ってしまってこまった。同じように clearTimeout("hoge()")では、終了していた場合などにエラーとなる。
そこで var timer に記録してそれを clearTimeout で消すという形で解決できるようす。
ただし、現時点では、マウスの出入りのマージン部分の判定がうまいこと行かないこと。あとは、複数のdivの動作を同時にできない（だろう）こと。
Web を調べてみると callback の処理がうんたらというのを見かけるけど，JavaScript の setTimeout とかの実装はどうなっているのだろうか? thread とは違う感じなのでちょっと困るなぁ．
TODO
- 現時点では、マウスの出入りのマージン部分の判定の改 善。
- あとは、複数のdivの動作を同時にできない（だろう）こと。