POPSブログ

jQuery hover() アクション/6

157

  Category:  jquery2012/10/24 pops 

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

 

jQuery hover() アクション 6

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。画像をスライドして変化させます。スライド方向の設定変更を行えるようにしました。


画像をスライドして変化させるサンプル


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


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





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





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


HTML JS CSS について


HTML

DIV要素で全体を囲み、A要素にクラスをあたえます。複数個あってもOKです。
A要素、rel に「スライド画像URL」を記述しておきます。


<div><a class="imagehover5" href="リンクURL" rel="スライド画像URL"><img src="画像URL" width="画像幅" height="画像高さ" /></a></div>

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


JS

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



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

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

		//slideの種類を設定 0=right 1=left 2=top 3=bottom
		var slidetype=0;

		//初期位置修正係数
		var x_v=[1,-1,0,0];
		var y_v=[0,0,-1,1];
		//url保存
		var sliceimgurl=[];

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

			sliceimgurl[i]=$(this).attr('rel');
			//画像タグを作る
			var chips=$('<img src="'+ sliceimgurl[i] +'" class="chips" />');
			$(this).append(chips);
			//幅高さ
			var pos_x=$(this).width();
			var pos_y=$(this).height();
			//初期位置決定
			var x=pos_x*x_v[slidetype];
			var y=pos_y*y_v[slidetype];
			//CSSで固定
			chips.css({'position':'absolute','top':y,'left':x});

			$(this).hover(
				function () {
					//over 原点に戻る
					$(this).find('.chips').animate({'top':0,'left':0},400);
				},
					function () {
					//out 初期位置に戻る
					$(this).find('.chips').animate({'top':y,'left':x},400);
				}
			);

			//aが機能しなくなるので追加
			//href情報を読み取りlocation.hrefでとばす
			$(this).click(function(){
				location.href=$(this).attr('href');
			});

		});
	});
})(jQuery);

画像の大きさを同じにした場合のJSです。「スライド画像」はJSで新たに作り、rel 情報より画像を表示させます。大きさが違う場合は面倒になります。


スライド方向の設定

スライド方向の設定変更を行えるようにしました。JS先頭の slidetype の値を変更ください。


CSS

ここでのCSS例です、環境に合わせて変えてください。DIV要素の中にIMG要素が入っている構造です。
基本的に、DIV要素を position:relative で位置を固定、中の画像が拡大してもはみ出さないように overflow:hidden にします。IMG要素を position:absolute にします。
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;
}

.imagehover5 {
width:100px;
height:100px;
}
.imagehover5 img {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
}

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

/* ul 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;
}

.imagehover5 {
width:100px;
height:100px;
}
.imagehover5 img {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
}

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


「Aリンク」が機能しなくなる場合があります。

この構造では、「Aリンク」の上に「スライド画像」が来るためにAリンクが機能しなくなります。そのためにJSで location.href を使用してとばしています。
構造を変えれば「Aリンク」は機能しますが、シリーズでHTNL構造をほとんど同じにしている都合で補正処理をしました。


簡単ですが、以上です。

 


[ この記事の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]