POPSブログ

jQuery hover() アクション/5

156

  Category:  jquery2012/10/23 pops 

jQueryメソッド hover(over,out) を使用して、画像を拡大して変化させます。画像の大きさが違っていても対応できるように処理するタイプです。

 

jQuery hover() アクション 5

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。画像を拡大して変化させます。画像の大きさが違っていても対応できるように処理するタイプです。


画像を拡大して変化させるサンプル(B)


下の画像を「HOVER」ください。画像を変化させます。


1. テーブルの中に配置の例





2. li リストの中に配置の例




サンプルとスクリプトの簡単な説明


HTML JS CSS について


前ページの発展形ですのでクラス名など同じにしています。但し、CSSで大きさを固定化していません。


HTML

DIV要素で全体を囲み、A要素にクラスをあたえます。複数個あってもOKです。


<div><a class="imagehover4" href="リンクURL"><img src="画像URL" width="画像幅" height="画像高さ" /></a></div>

重要。JSで画像の大きさを調べていますので、width="画像幅" height="画像高さ" は必ず記述ください。


クラス imagehover4 を変更の場合は、下のJS先頭部分 $(".imagehover4"). も変えてください。


JS

hover-test4b.js、(簡易記述、読み込んだら実行します)


//hover-test4b.js
//日本語

(function($){
	$(function(){

		//画像大きさの異なる場合
		var ratio=1.2;//比率1以上の値
		var item=[];
		var photo_W=[];
		var photo_H=[];
		var pos_x=[];
		var pos_y=[];

		$(".imagehover4").each(function(i){

			//オブジェクトに代入
			item[i]=$(this);

			//画像の大きさ取得
			photo_W[i]=item[i].children('img').width();
			photo_H[i]=item[i].children('img').height();

			//移動ポイント計算
			pos_x[i]=Math.round((photo_W[i]*(ratio-1))/2);
			pos_y[i]=Math.round((photo_H[i]*(ratio-1))/2);

			//画像容器の大きさを変更
			item[i].parent().css({'width':photo_W[i],'height':photo_H[i]});
			item[i].children('img').css({'width':photo_W[i],'height':photo_H[i]});

			item[i].hover(
				function () {
					//over
					//大きさ計算
					var w=Math.round(photo_W[i]*ratio);
					var h=Math.round(photo_H[i]*ratio);
					//拡大
					$(this).children('img').animate({'top':-pos_y[i],'left':-pos_x[i],'width':w,'height':h},200);
				},
				function () {
					//out
					//元の大きさに戻す
					$(this).children('img').animate({'top':0,'left':0,'width':photo_W[i],'height':photo_H[i]},200);
				}
			);
		});
	});
})(jQuery);


JS内部記述、画像容器の大きさを変更は、テーブルの中に中央配置する場合に画像容器の幅が無いと表示できなくなるので処理しています。
テーブルの中に配置しない場合など、画像容器の大きさを確定しなくとも良い場合などは、下記の処理は不要になります。


//画像容器の大きさを変更
item[i].parent().css({'width':photo_W[i],'height':photo_H[i]});
item[i].children('img').css({'width':photo_W[i],'height':photo_H[i]});


CSS

ここでのCSS例です、環境に合わせて変えてください。DIV要素の中にIMG要素が入っている構造です。
基本的に、DIV要素を position:relative で位置を固定、中の画像が拡大してもはみ出さないように overflow:hidden にします。IMG要素を position:absolute にします。
JSで position 移動と画像の大きさを変化させる。


テーブルの中に配置
画像を中央配置のため、divに暫定の大きさをいれています、JSで変更している

.sample3 {height:110px;}
.sample3,.sample3 tr,.sample3 td {
border:0;
}
.sample3 div{
display:block;
position:relative;
width:100px;
height:100px;
margin:0 auto;
overflow:hidden;
}

.imagehover4 img {
position:absolute;
top:0;left:0;
}

----------------------------------------------
liリストの中に配置
divは画像の大きさで広がりますから、大きさは設定していません

#sample-ul3 {
display:inline-block;
}
#sample-ul3 li{
margin-left:50px;
float:left;
}
#sample-ul3 li div{
display:block;
position:relative;
overflow:hidden;
}
#sample-ul3 li .imagehover4 img {
position:absolute;
top:0;left:0;
}

テーブルの場合に「全て中央」に表示するには、全体に(又はDIV要素の親要素) text-align:center を与え、DIV要素 にmargin:0 auto が基本になります。上記のCSSはここでの例ですので実際には、旨く調整ください。
現実には単独で使用するのではなく、上記サンプルのように複数の画像を並べる場合が多いとおもいます。


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , series

[ jQuery hover() アクション シリーズ記事 ]

jQuery hover() アクション/72012.10.25
jQuery hover() アクション/62012.10.24
jQuery hover() アクション/52012.10.23
jQuery hover() アクション/42012.10.22
jQuery hover() アクション/32012.10.21
jQuery hover() アクション/22012.10.20
jQuery hover() アクション/12012.10.19

 

ブログ記事一覧

年別アーカイブ一覧



[1]