2015年3月2日 星期一

jQuery - Sliding Image Menu (2)

除了預設的設定之外,亦可透過JavaScript設定jQuery Sliding Image Menu的不同效果,以下是設定以Fade in & out (淡入淡出),其中mode屬性設為fade、easing屬性設為jswing:

...
【執行結果】

當以滑鼠移至Sliding Image Menu上方時,將以淡入淡出的效果顯示選單:
以下是設定以Sequential Fade in & out (連續式淡入淡出) 的效果顯示選單,其中mode屬性設為seqFade、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Horizontal Slide (水平滑動) 的效果顯示選單,其中mode屬性設為horizontalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Horizontal Bounce Slide (水平彈跳滑動) 的效果顯示選單,其中mode屬性設為horizontalSlide、easing屬性設為easeOutBounce、seqfactor屬性設為100:

...
以下是設定以Sequential Horizontal Slide (連續式水平滑動) 的效果顯示選單,其中mode屬性設為seqHorizontalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Vertical Slide (垂直滑動) 的效果顯示選單,其中mode屬性設為verticalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Sequential Vertical Slide (連續式垂直滑動) 的效果顯示選單,其中mode屬性設為seqVerticalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Vertical Alternating Slide (垂直交替滑動) 的效果顯示選單,其中mode屬性設為verticalSlideAlt、easing屬性設為jswing、seqfactor屬性設為100:

...
【參考資料】

[1] jQuery:http://jquery.com

© Chia-Hui Huang

沒有留言:

張貼留言