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

FizzBuzz問題のJavaScriptコードを改良。

function FizzBuzz(){
	var n, buf, res="";
	for(n = 1 ; n <= 100; n++){
		buf="";
		if( n%3 == 0 ){ buf += "Fizz"; }
		if( n%5 == 0 ){ buf += "Buzz"; }
		if( buf == "" ){ buf = eval( n ) }
		res += buf + '<br />';
	}
	document.getElementById('result').innerHTML = res;
}

前回に比べて違うのは毎回 document.write() で書き出さなくなったのと、条件式を1つ省略しました。

スポンサーサイト

ちょっとずつ小出しにしていた簡易フォトギャラリーもさすがにマンネリ化してきたので今回で最終回



JavaScript

$(function(){
	var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
	var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
	
	for( i=0; i<=mainImgs.length-1; i++){
		image = new Image();
		image.src = imgURL + mainImgs[i];
	}
	
	$('#item_list li img').click(function(){
		if( $('#main_view img').attr('src').indexOf($(this).attr('id')) == -1 ){
			thisImg = imgURL + $(this).attr('id') + '.png';
			$('#main_view img').before("<img src='" + thisImg + "' alt='' />");
			$('#main_view img').eq(1).fadeOut("fast",function(){
				$(this).remove();
			});
		}
	});
})

HTML

<div id="main_view">
<img src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter-thumb.png" width="48" height="48" /></li>
	<li><img id="google" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/google-thumb.png" width="48" height="48" /></li>
	<li><img id="flickr" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/flickr-thumb.png" width="48" height="48" /></li>
	<li><img id="facebook" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/facebook-thumb.png" width="48" height="48" /></li>
</ul>

CSS

#main_view{
	height: 200px;
	width: 230px;
	margin-bottom: 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	border: 1px solid #999;
	padding-left: 30px;
}
#main_view img{
	position: absolute;
}
#item_list{
	position: relative;
	top: 222px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

今までずっとPureJSで書いてきたんですがステップアップとしてちょっとした演出を付けたかったのでjQueryで書き直しました。
参考記事:jQueryで作る画像ギャラリーのチュートリアル

今回のポイントはなんと言っても画像が切り替わる際の演出です。今までのPureJS版ではクリックする度にパッと変わっていた画像がjQueryのfadeOut()を使うことによってふわっとオーバーラップして切り替わっています。詳細な動作については参考記事を御覧下さい。

今回も見た目はまったく変わっていませんがパフォーマンスがちょっとだけ向上



JavaScript

var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];

// 画像のプリロード
for( i=0; i<=mainImgs.length-1; i++){
	image = new Image();
	image.src = imgURL + mainImgs[i];
}

function change( pictNo ){
	document.mainImg.src = imgURL + mainImgs[ pictNo ];
}

※HTML,CSSは変更していないので割愛


変更点は5~8行目に追加された画像のプリロードで、これが追加されたことによってページが読み込まれた直後から画像の切替がサクサクと切り替わるようになります。前回のテコいれ版ではサムネイルがクリックされてから画像を取得する動作になっていたので初回クリックの反応がわずかに遅れる感じがしていたのですが、画像を先に読ませることによってストレスなく画像が切り替わるようになるわけです。

先日の超簡易版の画像を入れ替えるJavaScriptにちょっとだけテコ入れしました。


JavaScript

var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
function change( pictNo ){
document.mainImg.src = imgURL + mainImgs[ pictNo ];
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter-thumb.png" width="48" height="48" onclick="change(0);" /></li>
	<li><img id="google" src="google-thumb.png" width="48" height="48" onclick="change(1);" /></li>
	<li><img id="flickr" src="flickr-thumb.png" width="48" height="48" onclick="change(2);" /></li>
	<li><img id="facebook" src="facebook-thumb.png" width="48" height="48" onclick="change(3);" /></li>
</ul>

※CSSは変更していないので割愛


見た目の動作自体はまったく同じですが、JavaScriptの中身が変わっています。それに伴ってHTMLもちょっとだけ変更。


何が変わったかと言いますと

  • ・サムネイルはサムネイル用に小さい画像を用意
  • ・画像変更用のアドレスを配列で準備
  • ・引数は番号だけを渡す this.src → 数字(今回は0~3)


前回よりはちょっとクラスアップした感じでしょうか。
※前回同様li要素に設定されているsrc属性は実際のものとは異なります。

超簡易版の画像を入れ替えるJavaScript。画像を入れ替えるだけの本当に簡単なものです。


JavaScript

function change( pict ){
	document.mainImg.src = pict;
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="google" src="google.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="flickr" src="flickr.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="facebook" src="facebook.png" width="48" height="48" onclick="change(this.src);" /></li>
</ul>

CSS

#main_view{
	width: 230px;
	border: 1px solid #999;
	margin: 10px 10px;
	padding-left: 30px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

仕組みとしてはli要素にonclickイベントで大きく表示されている画像のsrc属性を変更する というもので、引数にthis.srcとすることでli要素に設定されている画像のsrc属性を取得しています。なので、li要素に設定されているのと同じ画像が大きな画像として表示される形になっています。この方法はサムネイル画像を用意しなくてもいいという利点がありますが、表示させたい画像が大きければ大きいほどサムネイルの画像容量が大きくなるという欠点があるので実用には向かないかと… あくまで習作のものですね。
※注意 li要素に設定されているsrc属性は実際のものとは異なります。



openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

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