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

PUREST

01 | 2017/02 | 03
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 - - - -

Recent Entries

Recent Comments

Recent Trackbacks

Archives

Category

Links

Search

Recommend

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