在網頁設計領域中，照片的顯示方式一直都有新的突破，從早期簡單的圖片，自行製作網頁，到一些軟體協助產生相簿的網頁，到目前流行採用雲端的相簿連結方式，讓網頁設計人員需要經常涉獵不同的方法，以配合當時的.....流行或習慣。
以下介紹的是利用完成度較高，且彈性又大的一些方法，主要是採用已經完成的部份程式，結合到自己的網頁，這樣做的好處是可以維持原本美工設計的風格，也不會隨雲端系統的改換而出現無法控制的廣告或版面不合等狀況，非常適合網頁設計人員使用。
主要的技術大致有 Javascript、JQuery、Flash及HTML5，挑出幾個具有代表性的資源。
1. 採用單純的 Javascript 技術
2. 使用 JQuery 技術
3. 使用 Flash 技術
4. 使用 HTML5 等技術
更多的資料，未來會持續性地加以補充。
2011年11月10日 星期四
2011年11月5日 星期六
圖片特效教學 (10js-2)
圖片特效教學 (10js-1)
《Javascript 的圖形特效》一文中的第一種特效如下：
此為採用單純的 javascript 所製作出的特效，且所有顯示的圖片均集中寫在 html 部份，很容易更換為自己想要的圖片。步驟為：
(1) 先準備好數張圖片 (下圖為原先展示的範例圖檔，要區分出有5個不是)
此為採用單純的 javascript 所製作出的特效，且所有顯示的圖片均集中寫在 html 部份，很容易更換為自己想要的圖片。步驟為：
(1) 先準備好數張圖片 (下圖為原先展示的範例圖檔，要區分出有5個不是)
(2) 修改編頁中圖片的部分
(3) 如果想要包覆在自己指定的圖層 div 中亦可
(4) 如下示範
預祝順利！
2011年11月4日 星期五
Javascript的照片特效
這算是非常古老的一組資料，年代來源已不可考，用Google搜尋『10款讓你震撼的圖片展示js代碼』，也是滿坑滿谷的複製轉貼內容。
不過就這幾款的效果而言，仍然很有特色，最主要在於它是利用純粹javascript寫成，而且將圖檔定義與程式有效分離的做法，很值得做為入門的學習。要學習的倒不是它的程式如何寫成，而是如何將該效果引用到自己的網頁上。
以下貼上它的預覽圖片，點取下方連結亦可直接查看預覽頁面：
檔案下載：這裡
參考來源：早期是由 zcool 網站發現，但該網站也是轉貼自其他來源，已不詳
不過就這幾款的效果而言，仍然很有特色，最主要在於它是利用純粹javascript寫成，而且將圖檔定義與程式有效分離的做法，很值得做為入門的學習。要學習的倒不是它的程式如何寫成，而是如何將該效果引用到自己的網頁上。
以下貼上它的預覽圖片，點取下方連結亦可直接查看預覽頁面：
(本站教學)
檔案下載：這裡
參考來源：早期是由 zcool 網站發現，但該網站也是轉貼自其他來源，已不詳
訂閱：
文章 (Atom)