這是一個透過 javascript 來執行的網路秀圖「動畫」。在網頁上展示的的圖上點一下，縮圖就會變成原圖大小，或是自訂的尺寸大小。如 Eureka! Science News 網頁上所顯示的秀圖效果一樣。
對我而言，這種效果很吸引人，而且在網上衝浪時可以不用換頁。小圖只要點一下就會變成比較清楚的大圖，而放大的圖再點一下又會變回原本的縮圖，很是方便。其所佔版面也比較小。除了在上述的新聞網頁上能看到這種效果之外，在 Apple 的網頁上更是好看。在經營網頁/部落格後，看到這種令我驚豔的效果，自然不會忽略掉，因而開始著磨要怎麼弄到相關的、現有的原始碼放到個人網頁/部落格上。
請 Google 大神幫了個忙後發現，這種秀圖方式有很多種。有些是用 javascript 就能解決，有些網站則是一不做二不休地用更加炫爛的 Flash 來製作。我根本不知道怎麼弄 Flash ，也沒有相關軟體，太貴了不想買。而 javascript 則是能對照著看懂一丁點兒。於是乎，在權衡了一下便決定以 javascript 來達到效果。網路上主要有 Lightbox 和 FancyZoom 兩型，這倒不是因為效果類型是這兩型發展出來的，而是由於我個人主觀地在觀看了許多網頁秀圖效果後所得到的粗略結論。
LightBox 系列主要是縮圖在放大時是一塊白色塊出現，然後向左右，向上下展開白色區塊，等到區塊放大到能容納圖片大小之後，圖片就秀出來了，此時的網頁是相當於圖片的背景，而且是除了放大圖之外整頁呈現暗色。至於 FancyZoom 一類的，則是從縮圖就直接放上到原圖大小，或是指定的大小，放大的過程中圖案一直都顯示著，而且是呈現半透明的顯示效果直到放大過程結束，網頁本身並不會呈現暗色，圖片四週有像是半透明的陰影。當然，暗色背景什麼的是可以在 script 上調整，並不一定說某種風格並是屬於哪一類。
網友憂藍夢境的部落格上搜集了一些 LightBox 類 javascript 的相關資訊，或是直接到 Lightbox 2 網頁上找尋資料。至於 FancyZoom 則是可以到 Cabel 的部落格上下載其 javascript 來使用。下載的檔案要再修改一下 CSS 檔或 javascrpt 上的檔案路徑，免得瀏覽器在讀取時找不到關聯的檔案。而安裝方式就如 Lightbox 2 或 Cabel 網頁上說明的一步步按順序來裝，很簡單的。我自己是用 FancyZoom 效果，很有蘋果風。
下面便秀兩張網站的截圖：
對我而言，這種效果很吸引人，而且在網上衝浪時可以不用換頁。小圖只要點一下就會變成比較清楚的大圖，而放大的圖再點一下又會變回原本的縮圖，很是方便。其所佔版面也比較小。除了在上述的新聞網頁上能看到這種效果之外，在 Apple 的網頁上更是好看。在經營網頁/部落格後，看到這種令我驚豔的效果，自然不會忽略掉，因而開始著磨要怎麼弄到相關的、現有的原始碼放到個人網頁/部落格上。
請 Google 大神幫了個忙後發現，這種秀圖方式有很多種。有些是用 javascript 就能解決，有些網站則是一不做二不休地用更加炫爛的 Flash 來製作。我根本不知道怎麼弄 Flash ，也沒有相關軟體，太貴了不想買。而 javascript 則是能對照著看懂一丁點兒。於是乎，在權衡了一下便決定以 javascript 來達到效果。網路上主要有 Lightbox 和 FancyZoom 兩型，這倒不是因為效果類型是這兩型發展出來的，而是由於我個人主觀地在觀看了許多網頁秀圖效果後所得到的粗略結論。
LightBox 系列主要是縮圖在放大時是一塊白色塊出現，然後向左右，向上下展開白色區塊，等到區塊放大到能容納圖片大小之後，圖片就秀出來了，此時的網頁是相當於圖片的背景，而且是除了放大圖之外整頁呈現暗色。至於 FancyZoom 一類的，則是從縮圖就直接放上到原圖大小，或是指定的大小，放大的過程中圖案一直都顯示著，而且是呈現半透明的顯示效果直到放大過程結束，網頁本身並不會呈現暗色，圖片四週有像是半透明的陰影。當然，暗色背景什麼的是可以在 script 上調整，並不一定說某種風格並是屬於哪一類。
網友憂藍夢境的部落格上搜集了一些 LightBox 類 javascript 的相關資訊，或是直接到 Lightbox 2 網頁上找尋資料。至於 FancyZoom 則是可以到 Cabel 的部落格上下載其 javascript 來使用。下載的檔案要再修改一下 CSS 檔或 javascrpt 上的檔案路徑，免得瀏覽器在讀取時找不到關聯的檔案。而安裝方式就如 Lightbox 2 或 Cabel 網頁上說明的一步步按順序來裝，很簡單的。我自己是用 FancyZoom 效果，很有蘋果風。
下面便秀兩張網站的截圖：
Powered by ScribeFire.
沒有留言:
張貼留言
逢廣告文必砍！