POPS-SLICE-MENU

前のページに戻る (index)

SLICE-MENU (POPS-SLICE-MENU)

SLICE-MENU (POPS-SLICE-MENU) DEMO (slice_menu.js)

[[ このスクリプトは jquery-1.4.2 を使用しています。(jquery-1.4.4 可動検証済み) ]]

タイトル

タイトル説明2

タイトル

タイトル説明3

サンプルは簡易番号16、速度400を設定しています。
背景色は黒、画像を設定できます。
内部スライド要素には、2-3番はテキスト、1.4.5番は画像を設定しています。
上部スライス要素画像は140x140サイズです。
注意、jquery-1.4.2 以上を使用してください。

/// 内容と設定などいささか面倒になりますので、簡単にするために、シミュレーションを用意しました。///

[ SLICE-MENU用 / 簡単設定の確認、アニメ動作確認、変更、設定テキストの取得がおこなえます ]

スクリプトの特徴

使用目的として、画像使用のＭＥＮＵに対するスライスエフェクト専用です。
( いわゆる、Vertical-Sliding-Bar-Effect/ Sliding-Door-Effect などの組み合わせ )
２０種類の多彩なスライスエフェクトを番号入力だけで簡単に実現します。
画像の大きさは150x150サイズ前後の大きさを想定しています。
標準、(1-8)スライス画像エフェクト、(4x4)16分割、または固定(2x2)4分割画像の組み合わせ。
多少の設定、スライス数増減可能、速度の変更は可能です。
画像背景、中のスライド要素に画像を挿入可能です。つまりデザインの幅が広がる
画像数は5枚前後、合計分割数(スライス数)がすくなければ画像も増やすことが可能です。

「簡易番号入力で１発簡単設定」

簡易番号入力で１発簡単設定が可能です、下の設定表の番号をスクリプトの初期値に記入するだけ、
1-20まで２０種類が簡単に設定できます。

対応ブラウザ(検証済みブラウザ)

・対応ブラウザ IE6.7.8 Safari(4.0.4)+ Firefox(3.5.5)+ Chrome(5.0.375.99)+ Opera(10.53)+

DOWNLOAD

SLICE-MENU (POPS-SLICE-MENU) (slice-menu.js)

SLICE-MENU DOWNLOAD.................................
[ slice-menu.zip ] ( HTML画像を含むサンプル一式 )
JS (slice-menu.js) 14KB / ZIP 160KB

DOWNLOAD ZIP に含まれる内容

サンプルには、jquery-1.4.2.min.js jquery.easing.1.3.js が内包されています。
該当の、SLICE-MENU などの JS CSS 一式。
該当の、サンプル画像など、一式。
サンプルＤＥＭＯ html。
(ＪＳ説明テキストは有りません。)

jquery.com より最新の jquery を DOWNLOAD する。

http://jquery.com/

SLICE-MENU 設置方法および関連資料など

【操作】右側 BAR を「クリック」しますと開示します。

設置方法を表示/非表示

設置方法

※ 基本的には、150x150サイズ前後のリンクを張った複数画像に対するエフェクトを実行します。使用画像数およびレイアウトは自由です。
※ 使用者のＣＳＳの設定などの違いにより、やや雰囲気が違ったものにすることも可能です。
※ 同一ページ内にある複数画像に対して処理を行います。

★jQuery-1.4.2以上が必要です。jQueryの delay() を使用していますので、1.4.2以下では作動しません。

ＨＴＭＬ、ＪＳ、ＣＳＳ、ＪＳ実行設定のまとめ

jQuery共通のプラグインの設置方法ですから、ほとんど一般的なプラグインの設置方法と変わりません。

★次のように本体HTMLに、画像表示の基礎となるHTML構造を挿入して使用します。

画像を表示する場所に次のＨＴＭＬを挿入します。必要なＣＳＳ、ＪＳ、を読み込みＪＳを実行する。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<link rel="stylesheet" href="css/slice-menu.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js" /></script>
<script type="text/javascript" src="js/slice-menu.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).slice-menu();
	});
</script>
<head>
<body>

<div id="xxxxxxxx">

<div class="pops_slice_menu">
	<p><a href="リンク先ＵＲＬ"><img src="images/slice_img01.jpg" alt="LINK1" title="" width="140" height="140"/></a>
		<div class="slice_menu_caption"><h4 class="slice_menu_h4">タイトル(リンク先名)</h4><p class="slice_menu_p">リンク先説明など</p></div>
	</p>
</div>
<div class="pops_slice_menu">
	<p><a href="リンク先ＵＲＬ"><img src="images/slice_img02.jpg" alt="LINK2" title="" width="140" height="140"/></a>
		<div class="slice_menu_caption"><h4 class="slice_menu_h4">タイトル(リンク先名)</h4><p class="slice_menu_p">リンク先説明など</p></div>
	</p>
</div>

必要であれば「要素」を書き加える
レイアウトは自由

<div class="clear"></div>

</div>

</body>
</html>

設置手順簡易説明

slice-menu.css の読み込み。
jquery-1.4.2.min.js / jquery.easing.1.3.js の読み込み。
slice-menu.js の読み込み。
適応させる html 部分を規定の形式にする。( pops_slice_menu クラス )
slice-menu() の実行。

画像周りの HTML 部分基本構造


★html 部分基本構造 / 全てクラス設定です

<div class="pops_slice_menu">
	<p><a href="リンク先ＵＲＬ"><img src="画像のパス、画像名" alt="画像名など" title="" width="140" height="140"/></a>
		<div class="slice_menu_caption"><h4 class="slice_menu_h4">タイトル(リンク先名)</h4><p class="slice_menu_p">リンク先説明など</p></div>
	</p>
</div>

必要な画像要素数だけ重ねる

---------------------------------------
★簡易番号を設定しての実行なら、次のように 1-20 の番号を入れる。

$(document).slice_menu({easy_set_no: 16});

※ pops_slice_menu クラスの画像要素に対してスライス要素がＪＳでくわえられます。
※ slice_menu_caption クラスの部分が上方向にスライドします。
※ リンク画像周り、pops_slice_menu クラスはほとんどの場合 float 設定だとおもいますので、clear の後処理をしてください。
(ページのメインＣＳＳに .clear {clear:both;} などのクラスがあればそちらを使用されても構いません)
※ ID xxxxxxxx のような pops_slice_menu クラスを「ラップ」する構造は自由です。
※ slice_menu_caption クラスの中の部分につきましても、設計は自由です。この部分はスライドします。

基本的には以上ですが、レイアウトなど柔軟にできていますので、変更などをまじえて下に詳述します。必要な方はお読みください

[ 1 ] ＨＴＭＬ、設定変更などの資料

画像を表示する場所に、次の基本的ＨＴＭＬ構造を挿入します。

1-1 ＨＴＭＬ構造を作る

ＤＥＭＯでの設定例 ( 標準画像数4-6位 )

標準のＨＴＭＬの使用例です。画像要素数だけならべればよいことになります。内部に画像を使う場合と使わない場合の２とうりを例示します。
画像要素数を包むボックスのＣＳＳなどは、使用者が決定ください。pops_slice_menu クラスがあれば処理をすることになります。



●基本構造1、内部にテキストリンクを入れる場合

<div class="pops_slice_menu">
	<p><a href="リンク先URL 1"><img src="images/slice_img01.jpg" alt="LINK1" title="" width="140" height="140"/></a>
		<div class="slice_menu_caption"><h4 class="slice_menu_h4">タイトル1(リンク先名1)</h4><p class="slice_menu_p">リンク先説明1など</p></div>
	</p>
</div>
<div class="pops_slice_menu">
	<p><a href="リンク先URL 2"><img src="images/slice_img02.jpg" alt="LINK2" title="" width="140" height="140"/></a>
		<div class="slice_menu_caption"><h4 class="slice_menu_h4">タイトル2(リンク先名2)</h4><p class="slice_menu_p">リンク先説明2など</p></div>
	</p>
</div>

画像数だけ並べる

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

●基本構造2、内部に画像を入れる場合、直接かきかえます
テキストを画像用の <img /> にすりかえる

<div class="pops_slice_menu">
	<p><a href="リンク先URL 5"><img src="images/slice_img05.jpg" alt="LINK5" title="" width="140" height="140"/></a>
	<div class="slice_menu_caption"><img src="images/slice_img05b.jpg" /></div>
	</p>
</div>

画像数だけ並べる

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

●基本構造3、背景画像を別々に設定する場合など

クラスを追加して識別する slice_menu1 slice_menu2 slice_menu3 など

<div class="pops_slice_menu slice_menu2">
内部略する
</div>

それなりのＣＳＳが必要です

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

画像要素周りの基本構造


<div class="pops_slice_menu">
<p><a><img /></a>
	<div class="slice_menu_caption">
	文字または画像を挿入(リンク用コンテンツ他)
	</div>
</p>
</div>

pops_slice_menu クラスに対してＪＳでの画像スライス処理で新たに div 要素が加えられる(slice_mn0...)
pops_slice_menu クラス直下の img 画像要素は一旦非表示にされ分解してＪＳ処理でスライス表示されます
slice_menu_caption クラスは内部でスライドアニメする部分です

この構造だけ変更しなければ、かなり自由なデザインなど可能と思います
各々の背景色を変えたり、外形画像を入れたり、または簡単なコンテンツを挿入するとか、、、

画像要素を複数使用の場合は、最後に、<div class="clear"></div> などもお忘れなく

複数要素に対する処理のため、全て識別は「クラス名」です。妙名には他の名前と重複しないように注意ください。

1). クラス名 pops_slice_menu. slice_menu_caption はＪＳの処理で使用していますので、変更できません。
2). クラス名 slice_menu1. slice_menu2. ........ は違う背景画像を配置するためのものです。使用者が別名を使っても、同一クラス名であってもかまいませんこの辺は工夫です。
3). クラス名 slice_mn0. slice_mn1. slice_mn2.... slice_mn_bk はＪＳでの画像スライス処理で使用しますので使用しないでください。
4). 基本構造は変えないでください。不用意に変えると動作しない、またはブラウザにより内部のスライドアニメが機能しなくなります。

★-------------重要です。

画像の大きさ

原則、表示する画像の幅高さは、原則同じ大きさに統一してください。
但し、面倒になりますが、ＣＳＳに工夫すれば違う大きさの画像を使用することは可能です(違うクラス名をあたえて修正する)。背景画像は伸縮しませんので注意ください。

[ 2 ] CSS 読み込み設定

★次のようににHTML head に記入して読み出す。

jQuery動作には、先にＣＳＳを読み込むことが前提となっています。

slice-menu.css


<link rel="stylesheet" href="css/slice-menu.css" type="text/css" media="all" />

[ 3 ] CSS の変更設定

・上の解説に従い、使用者が都合の良いように変更してください。

※ 特に、画像要素である pops_slice_menu クラスの大きさ ( width height ) は必ず記入ください。


.pops_slice_menu {
	display:inline;/*ie6*/
	position:relative;
	width:140px;
	height:140px;
	margin-left:10px;
	border:4px #888888 solid;
	text-align:left;
	background: url("../images/img0g.jpg") no-repeat;
	background-color:#000000;
	float:left;
	overflow:hidden;
	cursor:pointer;
}

背景に画像を使用しない場合は「色」だけでかまいません
float:left; に注意
borderが不要であれば削除ください

用意する画像など

項目	1. 画像	2. サイズ	3. 総数	備考
1. 使用する画像	JPG. PNG GIF画像	大きさは自由(150x150前後)	自由	動作を確かめる
2. 背景画像、内部アニメ画像	JPG. PNG GIF画像	(大きさは自由)		必要に応じて

※ 画像要素は原則全て同じ大きさですが、識別できるクラスを与えてＣＳＳを工夫すれば、違う大きさの画像も混在可能です。

レイアウトなどは自由に使用者がＣＳＳでお決めください

処理を適用できる画像数は、分割数に左右されます。画像数１０個以下ならあまり問題がないとおもいますが、１画像に16分割を適用する場合は5-6個位が良いとおもいます。これはマシンの性能に左右されます。あくまでも使用者が判断ください。

[ 4 ] JS 読み込み設定

★jQuery-1.4.2以上が必要です。jQueryの delay() を使用していますので、1.4.2以下では作動しません。
また、jQueryプラグイン動作には、先にjQueryを読み込むことが前提となっています。
easing は標準で使用するようになっています、jquery.easing.1.3.jsの読み込みが必要です。

●注意、記述方法を間違えるとエラーになり動作しません。

jquery-1.4.2.min.js jquery.easing.1.3.js slice-menu.js


<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js" /></script>
<script type="text/javascript" src="js/slice-menu.js" /></script>

★注意、記述方法を間違えるとエラーになり動作しません。

[ 5 ] JS slice_menu()の実行

HTML head 部、または、hooter 部以降で実行させます。引数を渡すことができます。
簡易番号 1-20 を設定して(または引数を渡す)、簡単に動作を変えることができます。

●注意、slice_menu()の実行をしないとＪＳスクリプトは動作しません。



★通常の実行。
何も引数を渡しませんので、ＪＳの初期設定が実行されます。

<script type="text/javascript">
$(function(){
	$(document).slice_menu();
});
</script>

---------------------------------------------------------
★簡易番号を設定しての実行。
<script type="text/javascript">
$(function(){
	$(document).slice_menu({easy_set_no: 16});
});
</script>

簡易番号 1-20を入れる
簡易番号により設定が強制変更されて表示されます、簡単

簡易番号 0 は 簡易番号設定を使用しないことを意味します
自由に設定できます、設定に従い表示されますが、機能しない場合もあります

---------------------------------------------------------
★簡易番号 0 を設定しての実行。
<script type="text/javascript">
$(function(){
	$(document).slice_menu({easy_set_no: 0});
});
</script>

JS側の初期設定を実行します、通常の実行と変わりありません
簡易番号 0 は 簡易番号設定を使用しないことを意味します

---------------------------------------------------------
★変更部分だけ記入して実行。

<script type="text/javascript">
$(function(){
	$(document).slice_menu({
		slice_type: 'free',
		split_h: 4,
		split_v: 4
	});
});
</script>

変更部分だけ実行できます、その他はＪＳの初期設定が使用されます。
一般的なjQueryの設定と何ら変わりありません。変更部分だけ上書きされます

---------------------------------------------------------
★初期値を全て変更して実行。

<script type="text/javascript">
$(function(){
	$(document).slice_menu({
		easy_set_no: 0,
		slice_type: 'free',
		split_h: 4,
		split_v: 4,
		position_type: 0,
		delay_mode: 2,
		slide_position: 0,
		alternating_use: '',
		inversion_use: 'use',
		slide_time: 400,
		easing_use: 'use',
		easings: 'easeOutBounce'
	});
});
</script>

easy_set_no: 0 は簡易番号を設定を使用しないことを意味します
easings は easeOutBounce 以外はあまり効果はありません
最後に「 , 」をつけませんので注意ください

---------------------------------------------------------
★引数渡しの書式
{プロパテイ1:値1,プロパテイ2:値2,プロパテイ3:値3}

のように変更をすることができます。複数の「引数を渡し」は , で区切ります。
但し最後に「 , 」をつけませんので注意ください。

[ 6 ] JSでの初期値の書き換え変更

初期値は次のようになっています、下記の説明表などを参考にして書き換えが可能です。
(初期値設定内容は「簡易番号 1」と同じ設定)



---前後略す---

var o = $.extend({
	easy_set_no: 0,
	slice_type: 'diagonal',
	split_h: 2,
	split_v: 2,
	position_type: 0,
	delay_mode: 0,
	slide_position: 0,
	alternating_use: '',
	inversion_use: '',
	slide_time: 600,
	easing_use: 'use',
	easings: 'easeOutBounce'
}, o || {});


---前後略す---

JS側の初期設定値を書き換えたほうが便利です。

★JS側の初期設定値を書いているので実行の場合はＨＴＭＬを

<script type="text/javascript">
$(function(){
	$(document).slice_menu();
});
</script>

だけでよいことになる。

---------------------------------------------------------
★JSでの初期値に簡易番号を記入した場合
簡易番号 1-20 の記入があれば実行します
0 であれば簡易番号の実行はしません

---前後略す---

var o = $.extend({
	easy_set_no: 2,
	slice_type: 'diagonal',
	split_h: 2,
	split_v: 2,
	position_type: 0,
	delay_mode: 0,
	slide_position: 0,
	alternating_use: '',
	inversion_use: '',
	slide_time: 600,
	easing_use: 'use',
	easings: 'easeOutBounce'
}, o || {});

---前後略す---

(簡易番号があれば赤字部分は無視され内部データにより変更されます、
青字部分は、共通設定ですから、処理されます)

この例では 通常設定部分はeasy_set_no 1 と同じですので
easy_set_no: 1,
または
easy_set_no: 0,
を実行しても変化はありません

---------------------------------------------------------
★設定の基準
use の場合は use を記入、反対の場合は適当な文字 no 、または入れない ''。

1. 数値型 そのまま記入
2. 文字型 '' または "" でくくる
3. 複数型 データを , で区切る ここでは使用していない

★注意、記述方法を間違えるとエラーになり動作しません。

easing js について

easing は標準で使用するようになっています、jquery.easing.1.3.js (バージョンは何でも動作すると思う)の読み込みが必要です。
パスなどに問題がなければ、easing が正常に動作しますが、動作するか確認してください。
easing の種類は easings に easeOutBounce を設定しています、変更は自由ですが余り合うものはありません。 easing を使用しない場合は、読みこみは不要ですが、JS初期設定で easing_use を機能しないようにしてください。

★注意、easing JS が正しく読み込まれなかった場合は「アラート(EASING JS ERROR)」が表示され、自動的に easing_use は解除されます。
(スライス要素が最大 16 あるので「エラー」が最大 16 回起きるので大変見た目が悪い、そのため事前に easing 読み込みが正常か調べています。)
アラートが表示されても、問題はありません。体験的に、CSSを読み込まないことは「まれ」にあるようですが、ＪＳはほとんど読み込んでいるようです。


★easingの解除

easing_use: '',

[ 7 ] 簡易番号による実行と設定

1. 簡易番号による実行されるものは、別途図表を参考ください。
2. slice_type split_h split_v position_type delay_mode slide_position は設定しなくともスクリプト内部のデータで処理されます。
(分割なしの１枚画像の時(番号20)、slide_position が設定できます。)


★HTMLより簡易番号 16 を設定しての実行

<script type="text/javascript">
$(function(){
	$(document).slice_menu({easy_set_no: 16});
});
</script>

---------------------------------
★JSの初期設定に、簡易番号 16 を設定しての実行
(通常は 0 にしている)

--略--
easy_set_no: 16,
--略--

[ 8 ] シミュレーション取得の設定テキスト

次の例は「簡易番号16」によるテキストです。


★簡易番号16直後の取得テキスト
(簡易番号があれば赤字部分は無視され内部データにより変更されます、記入の必要はありません、
青字部分は、共通設定ですから、処理されます)

{
easy_set_no: 16,
slice_type: 'vertical',
split_h: 7,
split_v: 2,
position_type: 0,
delay_mode: 1,
slide_position: 0,
alternating_use: '',
inversion_use: '',
slide_time: 600,
easing_use: 'use',
easings: 'easeOutBounces'
}

但し実際の実行は
$(function(){
	$(document).slice_menu({easy_set_no: 16});
});
とするほうが多いこととおもいます

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

★簡易番号16取得後に、修正実行してからのテキスト

{
easy_set_no: 0,
slice_type: 'vertical',
split_h: 7,
split_v: 2,
position_type: 0,
delay_mode: 1,
slide_position: 0,
alternating_use: '',
inversion_use: '',
slide_time: 600,
easing_use: 'use',
easings: 'easeOutBounces'
}

easy_set_noが 0 になっているだけ
どちらも同じ処理を実行するテキストを出力します

1. 仮に、easy_set_no: 0 としても、easy_set_no 以下のデータが 16 番実行の値になっていますので正常に実行します。
2. alternating_use inversion_use slide_time easing_use easings は変更可能です。
3. 自動的に変更されるデータ(有効でない設定は 0 に修正される)は別途の図表を参照ください。資料、[ 簡易表示の設定詳細 ] 参照

CSS 関連の設定は出力されませんので、使用者が自由に設定変更ください。

[ 9 ] 設定が間違っている場合

設定が間違っている場合、次のような処理が行われます。設定を変更ください。

ＪＳが読み込まれない場合、スクリプトの書き方が悪い場合、実行されません。
slice_type の名前が間違っている場合、free に変換されます。( 例 diagonal を dagonal と書いたときなど )
分割が間違っている場合などは、作動する分割数に補正されます。
または、分割無の１枚画像 (none) に矯正補正されます。
CSS の書き方が悪い場合は、正常なレイアウトにはなりません。修正ください。

[ 10 ] 動作確認

・以上で通常動作しますが、旨く行かない場合は、JS CSS 画像パスなど確認ください。
・DOCTYPE が変わってもほとんどＣＳＳは position:absolute で書かれていますので大丈夫とおもいます。レイアウトなどが狂う場合は使用者がＣＳＳを変更ください。

[ 11 ] 設置環境に合わせて、JS CSSテキストの保存文字型変更が必要な場合があります

【重要】、jQuery以外、全てJISのテキストですので、使用環境に応じて適切に書き換えてください。

エンコードなどを行っても構いません。

資料の HTML JS CSS は全て「Shift_JIS」文字コード。
jQueryは本家よりダウンロードしたときのままです。

テキストの書き換えには、TeraPad が便利です（フリーウエア）。
TeraPad FREEテキストエディタ

「簡易番号入力で１発簡単設定」

簡易番号入力で１発簡単設定が可能です、下の設定表の番号をスクリプトの初期値に記入するだけ、
1-20まで２０種類が簡単に設定できます。

初期設定資料を表示/非表示

初期設定資料

資料、[ 設定のまとめ表 / 簡易番号の入力で表示できる事例1]

項目

簡易番号

備考

図例

指定変数

最大4x4

分割タイプ

slice_type

diagonal

vertical

horizontal

free

free_v

free_h

free_b

free_d

free_r

none

形態説明

4分割固定

片側1分割固定

自由分割

ベーシック

対角2方向に

1つのランダムな方向に

分割のない形(1x1)

移動方向

対角4方向

垂直方向

水平方向

対角4方向

水平または垂直方向

対角方向

対角2方向

対角方向

指定方向

SPLIT
(h x v)

split_h
split_v

4x4

5x1
9x1

1x5
1x9

4x4

5x2

2x5

4x4

1x1

16分割以内

交互方向逆転

片方１分割のみ有効

5x1
1x5

1x5
5x1

交互

方向を指定1

position_type

1-4
0=1

2.3

方向を指定2

slide_position

0-7

開閉状態

delay_mode

0-2

0-2
2分割時

交互遅延モード

alternating_use
useを設定する

○

市松状

描画方向逆転

inversion_use
useを設定する

○

効果不定

easing

easing_use
useを設定する

○

自由

easingの種類

easings
easeOutBounce

自由

○ = 設定可能です、但し効果が薄い場合もあります。
注意、図で色の薄くなっているものは「ＦＡＤＥ」ではありません、「時間差がある」または「カットされている部分」と理解ください。

資料、[ 簡易番号の入力で表示できる事例2 ]

項目

簡易番号

備考

図例

最大4x4

分割タイプ

(slice_type)

free_v

free_h

free

free_v

free_h

free_v

free_h

free_v

free_h

free

形態説明

free_v 交互

free_h 交互

free 3x3

free_v 上下に2分割

free_h 左右に2分割

free_v 上下に中央より

free_h 左右に中央より

free_v 上下に

free_h 左右に

free 遅延モード

---

※ 簡易番号の入力で表示できる事例は基本的に、細部変更は出来ませんが、
※ 20番は「交互遅延モード」が使用されています。
※ 16-17番は中央指定が使用されています。
※ その他のものは、「交互遅延モード」「描画方向逆転」を設定することが可能です。

※ これ以外は手動で、細部の設定を行ってください。設定をまちがえば違うパターンになります。
※ vertical horizontal は片側最大9分割くらいにしてください。(16分割まで可能ですが、)
※ 分割なしの場合は1を入力ください。「分割なしの１枚画像」は 1x1 になります。
※ 記載した slice_type の名前が間違っていれば free に修正されます。
※最大16分割まで有効、分割数が16を超えた場合は「分割なしの１枚画像」(1x1) に修正されます。
※ free は基本的に対角4方向を目指します。

/// シミュレーションを用意しました。動作を確認しながら、設定テキストの取得ができます。 ///

JSの初期設定記述部分、例


---前後略す---
{
	easy_set_no: 0,
	slice_type: 'diagonal',
	split_h: 2,
	split_v: 2,
	position_type: 0,
	delay_mode: 0,
	slide_position: 0,
	alternating_use: '',
	inversion_use: '',
	slide_time: 600,
	easing_use: 'use',
	easings: 'easeOutBounce'
}
---前後略す---

資料、[ 設定用変数などの解説 ]

項目	簡略図	変数	初期値	説明
図例		指定変数		1.「交互遅延モード」「描画方向逆転」は全てに設定可能です。状況により効果のない場合もあります。 2.「easing」は標準で使用するようになっています。
分割タイプ		slice_type	diagonal	1. diagonal : ４分割固定。四隅方向を目指します。 diagonal は、2x2=4 分割以外にはなりません。自動修正します。 2. vertical : 縦方向１分割固定。開閉状態指定可能。片方は2分割以上を指定する。1x1 は5分割に自動修正します。 3. horizontal : 横方向１分割固定。開閉状態指定可能。片方は2分割以上を指定する。1x1 は5分割に自動修正します。 4. free : 自由分割形、四隅方向を目指します、但し合計分割数は１６まで。 5. free_v : 自由分割vertical形、上下方向を目指します。 6. free_h : 自由分割horizontal形、左右方向を目指します。 7. free_b : 自由分割ベーシック形、左上より右下を目指します。 8. free_d : 自由分割、左上、右下の2方向を目指します。 9. free_r : 自由分割、ランダムな「１つの四隅方向」を目指します。 10. none : 分割なしの１枚画像です。移動方向を指定できます。分割しない場合はこちらを使用ください。slice_typeを入力しない場合、間違った文字の場合はこの「分割なし」に自動修正されます。
形態説明				基本的に上で説明した分割タイプがあります。分割は自由ですが、合計分割数は動作に影響しますので最大16におさえています。
移動方向				基本的に、スタイルがfreeのものは四隅方向を目指します。他のものは上下左右を目指します。移動方向を指定できる場合もあります。(方向を指定1.2参照)
SPLIT (h x v)		split_h split_v	split_h=2 split_v=2	最大分割数 16 以内に設定ください。例 (3x3=9. 4x4=16. 3x5=15. 2x8=16. 1x16=16) など、上限以内なら自由ですが、スタイルにより自動修正され事もあります。合計がオーバーすれば１枚画像に強制修正されます。注意、free_v free_h で片方の分割の違いにより動作が異なります。
アニメの速度		slide_time	600	200-600 位が標準です。 50以下の数値を設定した場合、200に修正されます。
交互方向逆転				free_v free_h で片方１分割場合のみ有効、交互に左右または上下に移動します。
方向を指定1		position_type	0	vertical horizontal 指定の場合のみ、上下左右の移動方向を指定できます。 0=1=top. 2=bottom. 3=right. 4=left
方向を指定2		slide_position	0	分割なしの１枚画像の場合のみ有効です。移動方向を指定できます。 0=topleft. 1=bottomright. 2=topright. 3=bottomleft. 4=top. 5=bottom. 6=right. 7=left
開閉状態		delay_mode	0	vertical horizontal および free_v free_h で片方2分割場合のみ有効。左から順、中央、両端からの３種を指定できます。 0=通常.1=中央より.2=外側より注意、奇数分割の場合のほうがキレイになります。偶数の場合は２つ同時に移動します。
交互遅延モード		alternating_use		use 最初、市松状に表示してから、少し遅れて移動します。
描画方向逆転		inversion_use		use を設定する。標準では、左上から右下(左から右)の方向を目指します。これを逆転(反対)させます。分割の形式次第ではあまり効果の場合もあります。例、diagonal は4要素を同時に移動しますので効果はありません。
easing		easing_use	use	easing を実行します。標準では使用します。注意、事前に easing.js の読み込みが必要です。easing.js の読み込みに失敗した場合は解除されます。
easingの種類	自由選定	easings	easeOutBounce	好みのeasingを選定できますが、必ずしもアニメに合うとは限りません。
-

分割が不適正であったり、slice_type が違った場合は free none などに自動修正される場合があります。

簡易番号使用時の表示の設定事例

資料、[ 簡易表示の設定詳細 ]
簡易番号を使用した場合は、下記のように内部データによって書き換えられます。

番号	スタイル	横分割	縦分割	開閉状態	方向指定1	方向指定2	交互遅延モード	描画方向逆転	備考
設定	slice_type	split_h	split_v	delay_mode	position_type	slide_position	alternating_use	inversion_use
値	名前	数値	数値	数値	数値	数値	use	use
0									使用しない
1	diagonal	2	2
2	vertical	5	1
3	horizontal	1	5		3
4	free	4	4
5	free_v	5	2
6	free_h	2	5
7	free_b	4	4
8	free_d	4	4
9	free_r	4	4
10	none	1	1
11	free_v	5	1
12	free_h	1	5
13	free	3	3
14	free_v	1	2
15	free_h	2	1
16	free_v	7	2	1
17	free_h	2	7	1
18	free_v	4	4
19	free_h	4	4
20	free	4	4				use
	-								-

※ 但し、alternating_use(交互遅延モード)、inversion_use(描画方向逆転)、は使用者が設定可能です。
※ 20 番は、alternating_use(交互遅延モード)が使用設定されています。
※ easing は標準で使用する設定になっていますので省略します。

その他の資料を表示/非表示

スクリプトの簡単な改造

簡単な改造方法について記述します。

[ 1 ] 内部のスライドアニメの速度を変えたい場合



412行前後
//show_parts
function show_parts(){

	if (hover_action == 'in') {
		caption_elm.css({'display':'block'}).animate({'top':0},200);
	}
	if (hover_action == 'out') {
		caption_elm.stop(true).css({'top':bs_H,'display':'none'});
	}
}

★200 になっている数値を好きな値変える
animate({'top':0},200) を animate({'top':0},400) に修正など

★1 にするとアニメはしない(実際はアニメしているが速度があまりにも早いのでアニメしていないように見える、0 にはしないこと)
animate({'top':0},1)

[ 2 ] HOVER-INでの要素画像のスライス速度を変えたい

本来、HOVER-INでの速度を早くしたいのですが、格子状にスライスしているアニメが早すぎるので、現在は同じ速度になります。

％を考慮して、早くする改造



373行前後
//in-action
var hover_item_in = function () {

	hover_action = "in";
	var sliceflag = 0;
	var k = 0;
	for (var i=0; i < o.split_h; i++) {
		for (var j=0; j < o.split_v; j++) {
			slice_chips[k].delay(delay_v[k]).animate({'top':slice_posY[k],'left':slice_posX[k]},o.slide_time,function() {
			sliceflag ++;
			if (sliceflag == split_total) {show_parts();}
			});
			k ++;
		}
	}
}

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

★方法1. 直接アニメ中の o.slide_time を直接数値に変更する( 1秒=1000 です)
次のスクリプトの部分　o.slide_time
.............},o.slide_time,function() {
を
.............},200,function() {
良いと思う数字にする、つまりここでは .2秒を設定したことになる

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

★方法2. 次のように60% になるようにスクリプトを加えて、アニメ中の o.slide_time を変更する
//in-action
var hover_item_in = function () {

	var slide_time2 = Math.floor(o.slide_time * .6);

	hover_action = "in";
	var sliceflag = 0;
	var k = 0;
	for (var i=0; i < o.split_h; i++) {
		for (var j=0; j < o.split_v; j++) {
			slice_chips[k].delay(delay_v[k]).animate({'top':slice_posY[k],'left':slice_posX[k]},slide_time2,function() {
			sliceflag ++;
			if (sliceflag == split_total) {show_parts();}
			});
			k ++;
		}
	}
}

★本来の速度 o.slide_time の 60% の速度に変更した値 (slide_time2) を代入した。割合はかえられる
var slide_time2 = Math.floor(o.slide_time * .6);
アニメ中の o.slide_time を slide_time2 に変更する (注意 o. が付かない)
.............},slide_time2,function() {

[ 3 ] 16分割以上にしたい場合

16分割以上の要素が複数個並ぶ訳ですから結構重くなりますので、本来はこれ以上増やすのはまだマシン環境からはお勧めできません。

ＪＳのサブ設定の値を変えますと可能になります。当然スライス終了までの時間ものびます。



//sub-settings
var max_split = 16;
を
var max_split = 25;
にすれば 5x5 25分割まで可能になります

【参考】

slice_menuの制作にあたり下記の記事などを参考にしました。ＣＳＳの形式など似通っていますが、同じではありません。

Create a Vertical Sliding Bar Thumbnail Effect with jQuery [ queness.com ]

ライセンス (GPL)

Scriptの応用、再頒布などについて

jQuery自体が、「ＧＰＬライセンス」ですので、それに順次ます。
掲載されたScriptの応用、書き換え、再頒布などについては、当方の許可を得ることなく全て自由に行えます。
Scriptの応用などによる発生する弊害、損害などは自己責任でお願いします。
jQueryを応用した単なる画像エフェクトシステムですので、問題になる箇所などはほとんどないとおもわれます。
より良きものにして頂くため、改良、ＣＳＳ箇所の発展改良、エフェクト画像の改良などして頂き、発表される事を強く望みます。

前のページに戻る (index)

企画制作：POPS WEB KOUBOU