[新着] Webテンプレートを仮オープンしました
<p>
<img src="sample1" alt="☆">
<img src="sample2" alt="★">
<img src="sample3" alt="※">
</p>
<script type="text/javascript">
function JumpStyle (element, timeOut) {
this.timerId = null;
this.timeOut = timeOut;
this.minOffset = -5;
this.accel = 1;
this.offset = this.minOffset;
this.style = element.style;
this.style.position = 'relative';
}
JumpStyle.prototype = {
jump : function () {
var top = parseInt (this.style.top) || 0;
if (this.accel < 0 && 0 < this.offset) {
this.accel *= -1;
}
top += (this.offset += this.accel);
if (0 < top) {
top = 0;
this.offset = this.minOffset;
}
this.style.top = top + 'px';
},
repeat : function () {
var _this = this;
this.timerId = setTimeout (function () {
_this.jump ();
_this.repeat ();
}, this.timeOut);
},
stop : function () {
clearTimeout (this.timerId);
}
};
new JumpStyle (document.getElementsByTagName ('img')[0], 50).repeat ();
new JumpStyle (document.getElementsByTagName ('img')[1], 100).repeat ();
new JumpStyle (document.getElementsByTagName ('img')[2], 200).repeat ();
</script><p> <img src="sample1" alt="☆"> <img src="sample2" alt="★"> <img src="sample3" alt="※"> </p>と、最後の
new JumpStyle (document.getElementsByTagName ('img')[0], 50).repeat ();
new JumpStyle (document.getElementsByTagName ('img')[1], 100).repeat ();
new JumpStyle (document.getElementsByTagName ('img')[2], 200).repeat ();は単なる使用例。これでピンと来ると思うんだけど。ゲームに使うということだったから、なるべく部品化しておいたんだが。/**
* JumpStyle - 1 つの要素をジャンプさせるオブジェクト
*
* コンストラクタ： var obj = new JumpStyle (element, timeOut);
* -element ジャンプさせたい要素ノード
* -timeOut ジャンプの速さ（ミリ秒）
*
* メソッド：
* -repeat() ジャンプ実行
* -stop() ジャンプ停止
*/
<!-- 実行サンプル（JumpStyle の定義は読み込み済みとする）-->
<p id="test1">テスト 1</p>
<p id="test2">テスト 2</p>
<script type="text/javascript">
// ジャンプさせたい要素ノードの取得
var element1 = document.getElementById ('test1');
var element2 = document.getElementById ('test2');
// ジャンプオブジェクトの作成
var jumpObj1 = new JumpStyle (element1, 50);
var jumpObj2 = new JumpStyle (element2, 50);
// ジャンプ実行
jumpObj1.repeat ();
jumpObj2.repeat ();
</script>setTimeout (function () { jumpObj1.stop(); }, 5000);
setTimeout (function () { jumpObj2.stop(); }, 5000);
）のですから。 jump : function () {
// this.minOffset 移動量の初期値
// this.offset 現在の移動量
// this.accel 加速度
// 要素の top の現在値を取得
var top = parseInt (this.style.top) || 0;
// 移動量（offset）を少しずつ減らし、0 になったら逆に足していく
// つまり、ジャンプの頂点まで達したら今度は下りていくように見せる
// 着地したらまた方向を反転させる
if (this.accel < 0 && 0 < this.offset) {
this.accel *= -1;
}
top += (this.offset += this.accel);
// 着地時
if (0 < top) {
top = 0;
this.offset = this.minOffset;
}
// 出力
this.style.top = top + 'px';
},if (this.accel < 0 && 0 < this.offset) {
this.accel *= -1;
}これは全く無意味な分岐なので削除してくれ（>>0 を下敷きにテストしたときの名残だ……>>11 でコメントまで書いておきながら、お恥ずかしい）。function BoundStyle (element, timeOut, repeat) {
this.timerId = null;
this.timeOut = timeOut;
this.repeat = Boolean (repeat);
this.minOffset = -5;
this.minAccel = 1;
this.offset = this.minOffset; // 移動量
this.accel = this.minAccel; // 加速度
this.style = element.style;
this.style.position = 'relative';
}
BoundStyle.prototype = {
jump : function () {
var top = parseInt (this.style.top) || 0;
// 移動
top += (this.offset += this.accel);
// 着地した場合
if (0 < top) {
top = 0;
this.offset = this.minOffset ;
// バウンドを終了する場合
if (Math.abs (this.offset) < ++this.accel) {
this.accel = this.minAccel;
if (this.repeat) this.start ();
} else {
this.start ();
}
} else {
this.start ();
}
this.style.top = top + 'px';
},
start : function () {
var _this = this;
this.timerId = setTimeout (function () { _this.jump (); }, this.timeOut);
},
stop : function () {
clearTimeout (this.timerId);
}
};
// 使用例
var element1 = document.getElementById ('test1');
/*
* コンストラクタ：new BoundStyle (element, timeout, repeat)
* -element 弾ませたい要素ノード
* -timeOut 弾ませる速さ（ミリ秒）
* -repeat true なら弾んだ後に再ジャンプ、false なら 1 度のみ
*
* メソッド：
* -start() ジャンプ実行
* -stop() ジャンプ停止
*/
var bonudObj1 = new BoundStyle (element1, 50, true);
boundObj1.start ();