用css及Jquery製作動態的手機版menu開關

Menu "Hamburger" Icon Animations

css按鈕或物件快速製作動態效果

製作按鈕時，在正常狀態加上下面兩個樣式

transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;

然後設定初始值，接著在滑鼠移入:hover的樣式再
設定滑鼠移入後的改變值即可

範例：

.mouseOver{
   transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   opacity: .6;
}

.mouseOver:hover{
   opacity:1;
}

上面的範例結果就會呈現動態變化

取得youtube縮圖

youtube縮圖可由下列幾個路徑規則取得不同尺寸的圖

//480*360 影片大圖
http://img.youtube.com/vi/影片的youtube ID/0.jpg 

//120*90 影片開始 
http://img.youtube.com/vi/影片的youtube ID/1.jpg 

//120*90 影片中間
http://img.youtube.com/vi/影片的youtube ID/2.jpg 

//120*90 影片結尾
http://img.youtube.com/vi/影片的youtube ID/3.jpg 

//120*90 影片預設縮圖
http://img.youtube.com/vi/影片的youtube ID/default.jpg 

//320*180 小的自訂縮圖 去黑邊
http://img.youtube.com/vi/影片的youtube ID/mqdefault.jpg 

//480*360 中的自訂縮圖 (等同於0.jpg)
http://img.youtube.com/vi/影片的youtube ID/hqdefault.jpg 

//640*480 影片大圖
http://img.youtube.com/vi/影片的youtube ID/sddefault.jpg 

//1280*720 影片大圖(只有當影片有 720p 或 1080p 的選項才有)
http://img.youtube.com/vi/影片的youtube ID/maxresdefault.jpg