顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

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

2015年3月1日 星期日

jQuery - Sliding Image Menu (1)

jQuery Sliding Image Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery.bgImageMenu.js
  • jquery.easing.js
其程式如下所示:
 



...
並以JavaScript設定預設Menu的背景圖片:
  
...
接著以<div></div>網頁標籤設定Sliding Image Menu選項:

【執行結果】

當以滑鼠移至Sliding Image Menu上方時,將顯示選單,此外背景圖片會隨著選單之不同而自動更新:
【參考資料】

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

© Chia-Hui Huang

jQuery - Rolling Rounded Menu

jQuery Rolling Rounded Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery-css-transform.js
  • jquery-animate-css-rotate-scale.js
其程式如下所示:
 



...
並以JavaScript設定Hover, Expand與Collapse等動作:

...
接著以<div></div>網頁標籤設定Rolling Rounded Menu選項:
 
【執行結果】

當以滑鼠移至Rolling Rounded Menu上方時,將以旋轉的方式顯示Rolling Rounded Menu:
Rolling Rounded Menu中的內容亦可為文字欄位,如下圖所示:
亦可為數個超連結,如下圖所示:
【參考資料】

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

© Chia-Hui Huang

jQuery - Lavalamp Menu

jQuery Lavalamp Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • lavalamp.js
其程式如下所示:
 


...
接著以<li></li>網頁標籤設定Lavalamp Menu選項則完成,其中以<li class="active">設定預設的Menu選項:

【執行結果】

當以滑鼠移至Lavalamp Menu上方時,Menu選項將以灰框顯示:
【參考資料】

[1] jQuery:http://jquery.com
[2] jQuery Lavalamp Menu Plugin:http://plugins.jquery.com/lavalamp/

© Chia-Hui Huang

jQuery - Sweet Menu

jQuery Sweet Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery.sweet-menu-1.0.js
  • jquery.easing.js
其程式如下所示:
 



...
並以JavaScript定義圖片等設定:

...
最後以<li></li>網頁標籤設定Sweet Menu選項則完成,相當簡單:

【執行結果】

當以滑鼠移至Sweet Menu上方時,將以延伸的方式顯示Sweet Menu:
【參考資料】

[1] jQuery:http://jquery.com
[2] jQuery Sweet Menu Plugin:http://www.jquery-plugins.info/sweet-menu-00015315.htm

© Chia-Hui Huang