聖誕音樂點唱機﹍部落格應景外掛

首先感謝 +Mark X  製作的「 聖誕節佈置懶人包 」,每年節慶期間都可從倉庫中取出,重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。 原版本包含了貓咪、小朋友、及水晶聖誕音樂,由於今年想要變換一下音樂,於是徵求了 Ma...

繼續閱讀全文

讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「 相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版 」FB 留言 Herman Tsao 詢問「 能做成依瀏覽器語言做自動轉換嗎? 」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自...

繼續閱讀全文

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候,「 影響效能的最大因素就是圖片載入 」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外,更好的改善方法是讓圖片能延遲載入,先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「 Lazy Load 」的作用。 好的,本篇的程式正是為...

繼續閱讀全文

[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析

Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得...

繼續閱讀全文

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title 裡的提示訊息,在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代, 訪客閱覽文章多半施展 "超速讀",相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現 。使用 javascript(簡稱 js)...

繼續閱讀全文

簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作 」說明了 CSS tooltip 原理,不過懶人包畢竟無法處理各種變數,留言提出了各種異常狀況,因此本篇仔細說明不同狀態下的解決方式。 << 請注意!本篇文章含會員限定內容 >>

繼續閱讀全文

CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒,不過這些複雜的語法參數對一般使用者而言,跟看到天書是差不多的。在這個「 Blogger 中文社群討論串 」 +綜合口味  推薦了這個線上 CSS 漸層語法產生器「 Ultimate CSS Gradient Generator 」,且 +Mar...

繼續閱讀全文

[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)

在增進網頁效能的執行事項之中,減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解,不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow?因為它會 造成 CPU 無謂的重複運算,消耗瀏覽器效能...

繼續閱讀全文
TOP