ひものれんみたいなjQueryのスクリプト

見出しをみてなんのこっちゃって?って思った方は・・・多分全員でしょうね。なんとなく制作してみたなんの実用性もないようなスクリプトですが、これがまたなんて表現してよいのやら。頑張って考えてみたスクリプト名が見出しのとおりです。百聞は一見にしかずってことで、デモページでも見て下さいな。そしてあまりの意味の無さ、使いどころの無さに嘆いて下されば幸いです。

Demo

必要なファイル

コーディング&設定

HTML

HTMLヘッダー内でjquery.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>

.himonorenをつけた要素の子孫要素にあるimgにスクリプトが適応されます。

<ul id="sample">
	<li><div class="himonoren"><img src="jqueryhimonoren_img_sample1.jpg" alt=""></div></li>
	<li><div class="himonoren"><img src="jqueryhimonoren_img_sample2.jpg" alt=""></div></li>
</ul>

CSS

以下のCSSはデザイン用なので、好きなように変えても動作に問題は無いと思います。

ul#sample {
	display: inline-block;
	margin-left: 10px;
}
ul#sample li {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 9px;
	margin: 0 10px 10px 0;
	float: left;
}

JavaScript

以下のスクリプトを記述。

$(function(){

	//対象要素設定
	var Noren = $(".himonoren");
	
	//一旦画像を非表示
	$("img",Noren).hide();

	//ロード終了後実行
	$(window).bind("load", function(){

		//classがhimonorenの要素に対しての処理
		Noren.each(function(){

			//変数宣言
			var This = $(this),
			NorenImg = $("img",This),
			ImgWidth = NorenImg.width(), //画像の幅を取得
			ImgHeight = NorenImg.height(); //画像の高さを取得

			//CSS設定
			This.css({
				width: ImgWidth,
				height: ImgHeight,
				position: "relative"
			});
			NorenImg.css({position: "absolute"});

			//要素追加
			for(var i=0; i<ImgWidth; i++){ //画像の幅のサイズ分要素を追加
				NorenImg.after("<span></span>");
			}
			
			//追加要素CSS設定
			var NorenSpan = $("span",This);
			var NorenSpanLng = NorenSpan.length;
			NorenSpan.css({ //追加要素を幅1px高さは画像と同じにして画像の上に重なるよう設定
				display: "block",
				width: "1px",
				height: ImgHeight+"px",
				backgroundColor: "#fff",
				position: "absolute",
				top: "0"
			});
			for(var i=0; i<NorenSpanLng; i++){ //追加要素の位置を1pxずつ横にずらす
				NorenSpan.eq(i).css({left: i});
			}
			
			//非表示にしていた画像を表示
			NorenImg.show();

			//ホバーイベント
			NorenSpan.hover(
			function(){ //追加要素マウスオン時にフェードアウト設定
				$(this).not(":animated").fadeOut(200);
			},
			function(){ //追加要素マウスアウト時にフェードイン設定
				$(this).fadeIn(5000);
			});

		});

	});

});

解説

.himonoren内の最後に幅1pxで高さは画像と同じspanを追加し、画像の幅のピクセル分量産して横にならべます。つまり全てのspanを合わせたサイズは画像と同じサイズになります。それを画像の上に重ねます。この時点で画像は見えなくなっています。最後にspanをマウスオンでフェードアウト、マウスアウトでフェードインするようにします。結果、横幅1pxspanがひとつづつフェードし下の画像が見えたり見えなくなったりしますのでひものれん?みたいに動作します。

あとがき

説明を増やしていこうと思い、ざっくりとした解説を記述しました。また、ソースコードもコメントアウトでの説明を増やしました。仕事でJS作ってる訳でもないので基本的なことすら忘れることも多々あります。だから色々書いておけば、記事を書くときは大変だけど見返すときに便利かなとってーのと、世の中に公開している以上は多少は説明すべきかなって思いに至った訳です。私もそういった方々に助けられてきた訳ですし、少しは人の為にって偽善を振りまくのも悪くないんじゃないかな。まー今回の内容は誰の為にもならなそうですが。。。

Top