2013年4月11日 星期四

【jQuery】使用jQuery製作仿Flash的動畫效果

去年底公司官網header部分要替換動畫效果因應聖誕節與新年,但由於公司考量到越來越多人使用行動裝置,某些行動裝置可能無法讀取Flash效果,所以改以jQuery效果達成。

至於本篇文章範例,礙於不便用公司的圖檔作demo,所以畫面圖檔是使用:

  • 原始圖檔來源
  • Designed By : Visionmates
  • Author Website : http://www.visionmates.com/
  • License / Usage details: Free for personal and non commercial use
  • 感謝 崇創意 協助圖片去背處理。

線上看範例請點我

2013年4月5日 星期五

【jQuery】使用jQuery ui中的show Effects自製照片輪播

照片輪播其實網路上也一樣有很多套件可以用,這次公司設計同事需求:

除了照片輪播,上方還要顯示幾之幾(目前第幾張 / 總張數)。

這樣的需求,網路上仍然找的到套件,但由於我不是很理解設計同事卡在哪個點不喜歡那個套件,所以還是得試著自己寫出一個,不管是照片list或是幾之幾區塊都用div包附,最後設計同事可以自行調整div的css樣式與位置,而我這邊就是提供js輪播語法與大圖html結構規則。

線上看範例請點我

2013年4月1日 星期一

【jQuery】使用jQuery的blockUI自製lightbox效果照片牆

關於lightbox照片牆效果,其實網路上可以找到蠻多套件可以使用,可是如果找不到適合的或想要的,或是希望畫面樣式都可以自己控制時就須要試著自己處理(本範例僅呈現簡易的js程式碼使用,無特別設計樣式),以下是本次需求:

  • 原始照片列表(A)不需click,滑鼠mouseover時即觸發lightbox(B)。
  • 觸發的lightbox(B)上會重新顯示所有原始照片列表(A)上的照片(小圖),並將大圖替換成選中圖、選中小圖加框線以區分是否為選中圖。

線上看範例請點我
writing for work~writing for life~