JavaScriptっぽい。

『JavaScriptっぽい。』の更新情報やJavaScriptに関する日記。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

クリックすると変化する画像(読み込む度に順番も変化)

自分のバンドのサイトを作るのに、久しぶりにコードを書いてみました。

イベントハンドラにメソッドを設定すると、 this が new したオブジェクトではなくて、イベントの発生元に変わってしまうので、グローバル変数 job にいったん this を退避させているんですけど、もっとスマートな方法ってないんでしょうかね? addEventListener を使っても一緒だし…。


<script type="text/javascript"><!--
var num_ary = [0,1,2,3];
var job;
function Random_img(ary,tgt){
	this.ary = ary;
	this.length = ary.length;
	this.tgt = tgt;
	this.shuffled_array = [];
	this.obj = null;
	this.count = 0;	
}
Random_img.prototype = {
	lord_img : function(){
		for ( var i = 0 , i_max = this.length ; i < i_max ; i++ ){ 
			( new Image() ).src = "live/" + this.ary[i] + ".jpg";
		}
	},
	random_img : function(){
		var i , random_num , temp_array = this.ary , array_length = this.length , temp_elemnt;
		for(i = 0 ; i < array_length ; i++){
			random_num = Math.floor(Math.random() * temp_array.length);
			temp_element = temp_array[random_num];
			temp_array.splice(random_num,1);
			this.shuffled_array.push(temp_element);
		}
	},
	append_img : function(){
		this.obj = document.createElement("img");
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[0] + ".jpg");
		this.tgt.appendChild(this.obj);
		job = this;
		this.count++;
	},
	img_change : function(){
		job.obj.setAttribute( "src" , "live/" + job.shuffled_array[job.count] + ".jpg");
		job.count++;
		job.count %= job.length;
	}
/*
	img_change : function(){
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[this.count] + ".jpg");
		this.count++;
		this.count %= this.length;
	}	//イベントにメソッドを設定すると、thisがnewしたオブジェクトじゃなくてメソッドを設定した要素になっちゃう。
*/
}
onload = function(){
	var random_obj = new Random_img(num_ary,document.getElementById("tgt"));
	random_obj.lord_img();
	random_obj.random_img();
	random_obj.append_img();
	random_obj.obj.onclick = random_obj.img_change;
	//if(addEventListener)random_obj.obj.addEventListener( "click" , random_obj.img_change , false );
}

//--></script>

<div id="tgt">
</div>
スポンサーサイト
  1. 2006/11/17(金) 20:51:04|
  2. サンプルソース|
  3. トラックバック:3|
  4. コメント:9
| ホーム | ブログ日本一>>

コメント

IEで動くかどうかは分かりませんが

DOM2 Eventの仕様ではこういう書き方ができます。

Random_img.prototype = {
(略)
img_change : function(){
this.obj.setAttribute( "src" , "live/" + this.shuffled_array[this.count] + ".jpg");
this.count++;
this.count %= this.length;
},
handleEvent : function(aEvent){
this.img_change();
}
}
onload = function(){
var random_obj = new Random_img(num_ary,document.getElementById("tgt"));

random_obj.lord_img();
random_obj.random_img();
random_obj.append_img();
random_obj.obj.addEventListener("click", random_obj, false);
}
  1. 2006/11/22(水) 15:07:14 |
  2. URL |
  3. Piro #3U5AOJtk
  4. [ 編集]

コメントありがとうございます。

なるほど。
DOM2の仕様では handleEvent メソッドをオブジェクトに持たせれば、そのオブジェクトをイベントリスナーとして登録できるということですね。
とても参考になりました。
  1. 2006/11/23(木) 21:34:35 |
  2. URL |
  3. PUREST #0I10gAlQ
  4. [ 編集]

ブログ運営者様

以前に書いたブログ記事、もったいなくありませんか?

これまで書いた膨大な記事を眠らせていませんか?

「レビューda!ドットコム-Reviewda.com-」がオープンしました。
古今東西あらゆるものの評判やクチコミを集めるサイトです。
従来のブログランキングなどとは異なり、
同ブログ内の記事でも異なる記事であれば、
URLを「クチコミ検索」というコーナーに複数登録可能です。
不特定多数の方が投稿された記事を絞り込み検索して読まれますので、
ご自身の記事一つ一つがブログのアクセスアップにつながります。
この機会に是非ご利用ください。

http://www.reviewda.com/

レビューda!ドットコム-Reviewda.com-
  1. 2007/01/05(金) 16:12:34 |
  2. URL |
  3. レビューda!ドットコム #/5UrdHk2
  4. [ 編集]

Good news, <a href="http://piohiobagisu26191.blogspot.com/2008/08/h2.html">竦黻?/a>, [url="http://piohiobagisu26191.blogspot.c

Good news, <a href="http://piohiobagisu26191.blogspot.com/2008/08/h2.html">竦黻?/a>, [url="http://piohiobagisu26191.blogspot.com/2008/08/h2.html"]竦黻?/url], http://piohiobagisu26191.blogspot.com/2008/08/h2.html 竦黻? fslmg,
  1. 2008/09/09(火) 09:42:15 |
  2. URL |
  3. Xvnmxdso #-
  4. [ 編集]

こんにちは

いつも拝見しています。継続して更新凄いです。僕も努力しないと・・・。最近寒くなってきたので体に気をつけて下さい。また覗きに来ます。
  1. 2008/11/10(月) 10:46:04 |
  2. URL |
  3. あきお #-
  4. [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2010/02/05(金) 17:36:03 |
  2. |
  3. #
  4. [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2013/02/01(金) 14:17:28 |
  2. |
  3. #
  4. [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2014/08/28(木) 06:12:48 |
  2. |
  3. #
  4. [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2014/09/04(木) 08:36:15 |
  2. |
  3. #
  4. [ 編集]

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://javascript.blog3.fc2.com/tb.php/45-fce69de1

-

管理人の承認後に表示されます
  1. 2007/01/05(金) 15:14:15 |

-

管理人の承認後に表示されます
  1. 2007/01/10(水) 13:14:20 |

-

管理人の承認後に表示されます
  1. 2007/01/12(金) 16:20:38 |

PUREST

04 | 2017/05 | 06
Sun Mon Tue Wed Thu Fri Sat
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

Recent Entries

Recent Comments

Recent Trackbacks

Archives

Category

Links

Search

Recommend

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。