POPSブログ

jQuery hover() アクション/4

155

  Category:  jquery2012/10/22 pops 

jQueryメソッド hover(over,out) を使用して、画像を拡大して変化させます。

 

jQuery hover() アクション 4

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。画像を拡大して変化させます。


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


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


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





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




hidden切替 (標準ではhidden設定です)
hidden
hidden 有効 hidden 無効

実際にはhidden設定で使用します。シミュレーションの都合で、初期段階で解除しています。


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


HTML JS CSS について


HTML

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


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

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


JS

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



(function($){
	$(function(){
		$(".imagehover4").each(function(){
			$(this).hover(
				function () {
					//over
					$(this).children('img').animate({'top':-10,'left':-10,'width':120,'height':120},200);
				},
				function () {
					//out
					$(this).children('img').animate({'top':0,'left':0,'width':100,'height':100},200);
				}
			);
		});
	});
})(jQuery);

画像を全てとした場合のJS例です。画像の大きさが違う場合は面倒になります。


画像を変化させている、、書き方いろいろ。


現在1番めに画像があるので
$(this).children('img'). としている

インデックスで制御するときは
1番めはeq(0)であるから
$(this).find('img').eq(0) などとする


CSS

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

overflow:hiddenが設定されていないならば食み出して拡大します。


当方での例

テーブルの中に配置

.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 {
width:100px;
height:100px;
}
.imagehover4 img {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
}

----------------------------------------------
liリストの中に配置

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

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


each()を省いた記述

クラスに対してのアクション設定ですから、下記のように each() を省いた記述もできます。但し複雑な処理を書くと意図した動きにならない事もあります。
私の場合、その時の処理状態に応じて each() を入れたりしています。



(function($){
	$(function(){
		$(".imagehover4").hover(
			function () {
				//over
				$(this).children('img').animate({'top':-10,'left':-10,'width':120,'height':120},200);
			},
			function () {
				//out
				$(this).children('img').animate({'top':0,'left':0,'width':100,'height':100},200);
			}
		);
	});
})(jQuery);


次回は、画像の大きさが違う場合のJSを掲載します。


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:series , Effect , jquery

[ 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]