クリックすると変化する画像（読み込む度に順番も変化）
自分のバンドのサイトを作るのに、久しぶりにコードを書いてみました。
イベントハンドラにメソッドを設定すると、 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>
コメント
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);
}
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);
}
- 2006/11/22(水) 15:07:14 |
- URL |
- Piro #3U5AOJtk
- [ 編集]
コメントありがとうございます。
なるほど。
DOM2の仕様では handleEvent メソッドをオブジェクトに持たせれば、そのオブジェクトをイベントリスナーとして登録できるということですね。
とても参考になりました。
DOM2の仕様では handleEvent メソッドをオブジェクトに持たせれば、そのオブジェクトをイベントリスナーとして登録できるということですね。
とても参考になりました。
- 2006/11/23(木) 21:34:35 |
- URL |
- PUREST #0I10gAlQ
- [ 編集]
ブログ運営者様
以前に書いたブログ記事、もったいなくありませんか？
これまで書いた膨大な記事を眠らせていませんか？
「レビューｄａ！ドットコム-Reviewda.com-」がオープンしました。
古今東西あらゆるものの評判やクチコミを集めるサイトです。
従来のブログランキングなどとは異なり、
同ブログ内の記事でも異なる記事であれば、
ＵＲＬを「クチコミ検索」というコーナーに複数登録可能です。
不特定多数の方が投稿された記事を絞り込み検索して読まれますので、
ご自身の記事一つ一つがブログのアクセスアップにつながります。
この機会に是非ご利用ください。
http://www.reviewda.com/
レビューｄａ！ドットコム-Reviewda.com-
以前に書いたブログ記事、もったいなくありませんか？
これまで書いた膨大な記事を眠らせていませんか？
「レビューｄａ！ドットコム-Reviewda.com-」がオープンしました。
古今東西あらゆるものの評判やクチコミを集めるサイトです。
従来のブログランキングなどとは異なり、
同ブログ内の記事でも異なる記事であれば、
ＵＲＬを「クチコミ検索」というコーナーに複数登録可能です。
不特定多数の方が投稿された記事を絞り込み検索して読まれますので、
ご自身の記事一つ一つがブログのアクセスアップにつながります。
この機会に是非ご利用ください。
http://www.reviewda.com/
レビューｄａ！ドットコム-Reviewda.com-
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
- 2008/05/16(金) 01:22:24 |
- |
- #
- [ 編集]
レロレロレロレロレロレロレロレロ
舐めるのが大好き！って言ってたから、よほどブェラチオが好きなんだろなって思ってたら全身舐めてきてビックリしたよー( ´д)
そのうえ俺のヵ〃マン汁も精孑も全部ゴックンしてくれたしヽ(´ー｀)ノサイコー
結局俺は寝転がってるだけだったけど、５МАＮ貰えちゃいました(^-^)v
今だから言うけど、鼻を舐められた時はぶっちゃけちょっと臭かった（＾＾；
http://thrt9.net/wasshoi/vi8pdls/
そのうえ俺のヵ〃マン汁も精孑も全部ゴックンしてくれたしヽ(´ー｀)ノサイコー
結局俺は寝転がってるだけだったけど、５МАＮ貰えちゃいました(^-^)v
今だから言うけど、鼻を舐められた時はぶっちゃけちょっと臭かった（＾＾；
http://thrt9.net/wasshoi/vi8pdls/
コメントの投稿
トラックバック
- トラックバックURLはこちら
- http://javascript.blog3.fc2.com/tb.php/45-fce69de1
-
管理人の承認後に表示されます
- 2007/01/05(金) 15:14:15 |
-
管理人の承認後に表示されます
- 2007/01/10(水) 13:14:20 |
-
管理人の承認後に表示されます
- 2007/01/12(金) 16:20:38 |
