POPSブログ

jQuery hover() アクション/7

158

  Category:  jquery2012/10/25 pops 

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

 

jQuery hover() アクション 7

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。画像をスライド(4DOOR)して変化させます。2DOOR設定変更可能です。


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


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


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





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




ドアタイプ切替 (標準初期では4DOOR設定です)
4door
4DOOR 2DOOR-V 2DOOR-H

「ドアタイプ」切り替えの「シミュレーション」ができます。


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


HTML JS CSS について


HTML

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


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

重要注意、シリーズ 1-6 は、A要素にクラスをあたえていましたので注意ください。

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


JS

slice-image.js、(JS実行命令を最後に記述しています、読み込んだら実行します)



//slice-image.js
//2-4door

(function($){
	jQuery.fn.slice_image = function(o) {
		//option
		var o = $.extend({
			imageWidth:100,
			imageHeight:100,
			speed:400,
			slide_type:'4door'//4door 2door-v 2door-h
		}, o || {});

		//slide_type無い場合4doorになる
		//初期値4doorの設定条件
		var split_h=2;
		var split_v=2;
		var slide_type=o.slide_type;

		var items=[];
		var item_no=0;
		//上層の大きさ
		var imageWidth=o.imageWidth;
		var imageHeight=o.imageHeight;

		var pos_y=[0,0,imageHeight/2,imageHeight/2];
		var pos_x=[0,imageWidth/2,0,imageWidth/2];
		var pos_y_v=[-imageHeight/2,-imageHeight/2,imageHeight,imageHeight];
		var pos_x_v=[-imageWidth/2,imageWidth,-imageWidth/2,imageWidth];

		//chip-WH
		var bsbk_W=imageWidth/2;
		var bsbk_H=imageHeight/2;

		//4door
		if (slide_type == '4door') {
			split_h=2;
			split_v=2;
		}
		//vertical
		if (slide_type == '2door-v') {
			split_h=1;
			split_v=2;
			pos_y=[0,imageHeight/2];
			pos_x=[0,0];
			pos_y_v=[-imageHeight/2,imageHeight];
			pos_x_v=[0,0];
			bsbk_W=imageWidth;
			bsbk_H=imageHeight/2;
		}
		//horizontal
		if (slide_type == '2door-h') {
			split_h=2;
			split_v=1;
			pos_y=[0,0];
			pos_x=[0,imageWidth/2];
			pos_y_v=[0,0];
			pos_x_v=[-imageWidth/2,imageWidth];
			bsbk_W=imageWidth/2;
			bsbk_H=imageHeight;
		}
		var split_max=split_h*split_v;

		//------------------------------------------
		var init=function (item_v,no_v,surl) {

			var slice_chips=[];
			var slicebs_pos_y=[];
			var slicebs_pos_x=[];
			//var w=item_v.width();
			//var h=item_v.height();
			var slice_base;
			var slice_box="";
			
			for (var i=0; i < split_max; i++) {
				var bname="slice"+ no_v + "s" + i;
				slice_box += '<div id="' + bname + '" class="slice-bk"></div>';
			}

			slice_base='<div class="slice-base">' + slice_box + '</div>';

			//append slice_base
			item_v.append(slice_base);

			//slice chips 背景画像を使用
			for (var i=0; i < split_max; i++) {
				var bs = $("#slice"+ no_v + "s" + i);
				bs.css({'left':pos_x[i],'top':pos_y[i],'width':bsbk_W,'height':bsbk_H,'background-image':'url('+ surl + ')'});
				bs.css({'background-position':(pos_x[i] * -1) + 'px ' + (pos_y[i] * -1) + 'px'});
			}

		}

		//over 画像を移動表示する
		function over_action (no_v) {
			//
			for (var i=0; i < split_max; i++) {
				var bs = $("#slice"+ no_v + "s" + i);
				bs.animate({'top':pos_y_v[i],'left':pos_x_v[i]},o.speed,function() {
				//
				});
			}

		}

		//out もとの位置に戻す
		function out_action (no_v) {
			//
			for (var i=0; i < split_max; i++) {
				var bs = $("#slice"+ no_v + "s" + i);
				bs.animate({'left':pos_x[i],'top':pos_y[i]},o.speed,function() {
				//
				});
			}
		}

		//------------------------------------------
		//strat-action
		return this.each(function() {

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

				var item=$(this);
				items[i]=item;

				//aが機能しなくなるので追加
				//これでは、hoverアクション前に設定しないと機能しないので注意
				items[i].click(function(){
					location.href=items[i].find('a').attr('href');
				});

				//var item_no=item.index(this);
				item_no=i;
				var simgurl=item.attr('rel');

				//上層にスライド画像をつくる
				init(item,item_no,simgurl);

				//action
				items[i].hover(
					function () {
						//over
						over_action(i);
					},
					function () {
						//out
						out_action(i);
					}
				);
			});
		});
	};

})(jQuery);

$(function(){
	$(document).slice_image();
});

画像の大きさを同じにした場合のJSです。「スライド画像」はJSで新たに作り、rel 情報より画像を表示させます。大きさが違う場合は面倒になりますので省略します。
JSの名前なども、使用者が変更されてもかまいません。


JSの設定変更

スライド方向、移動速度、の設定変更がおこなえます。

1. imageWidth imageHeight: 使用する画像アイテムの寸法を記入ください。CSSは合わせてください。
2. speed: 移動速度、200-1000、画像の大きさなどにより調整ください。
3. slidetype: スライド方向の設定変更を行えるようにしました。JS先頭の slidetype の値を変更ください。


CSS

slice-image.css

ここでのCSS例です、環境に合わせて変えてください。DIV要素の中にIMG要素が入っている構造です。
基本的に、DIV要素を position:relative で位置を固定、中の画像が拡大してもはみ出さないように overflow:hidden にします。IMG要素を position:absolute にします。
JSで 画像をスライドさせます。スライド画像の初期位置をかえれば自由な位置よりスライドさせることが可能です。


CSSは下記サンプルなどを参考に、使用者が用途にあわせて作成保存(名前など自由)ください。



当方での例

テーブルの中に配置
.sample4 {height:110px;}
.sample4,.sample4 tr,.sample4 td {
border:0;
}

----------------------------------------------
liリストの中に配置
#sample-ul4 {
display:block;
width:auto;
height:110px;
}
#sample-ul4 li{
display:inline-block;
margin-left:50px;
float:left;
}

----------------------------------------------
単独及び共通部分

.slice-base {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
background-color:transparent;
overflow:hidden;
}
.slice-bk {
position:absolute;
/*top:0;left:0;*/
background-repeat: no-repeat;
float:left;
overflow:hidden;
}

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


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

この構造では、「Aリンク」の上に「スライド画像」が来るためにAリンクが機能しなくなります。そのためにJSで location.href を使用してとばしています。


設定

「スライド画像」の大きさなどを設定します。slide_typeは 3種類あります。


//option
var o = $.extend({
	imageWidth:100,
	imageHeight:100,
	speed:400,
	slide_type:'4door'//4door 2door-v 2door-h
}


slice_image()の実行


現在、JSの最後に記載しています
$(function(){
	$(document).slice_image();
});

-------------------------------------------------------

HTML拠り実行する場合は、上記JS記載部分を削除して
<script type="text/javascript">
	$(function(){
		$(document).slice_image();
	});
</script>
となります

-------------------------------------------------------

HTML拠り設定変更して実行する場合
<script type="text/javascript">
	$(function(){
		$(document).slice_image({
			imageWidth:150,
			imageHeight:150,
			slide_type:'2door-v'
		});
	});
</script>
設定変更は上書きされます


簡単ですが、以上です。

 


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