網頁設計中的多層視差滾動效果 (Parallax scrolling)
觀察上面的圖片，裡面有三張圖片，分別放置於不同階層，如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫，但背景圖片動得比較慢，前景圖片動得比較快，我們就可以感受到較符合生活經驗的景深效果。 繼續閱讀
JavaScript技巧
Google Doodle-Google首頁的javascript動畫初探
今天早上除了發現自己過了10:42還活著之外，還發現Google首頁的Google Doodle有了新的動畫，今天的主題是瑪莎·葛蘭姆（Martha Graham)117歲誕辰 (不認識XD)，不過這種手繪風格的動畫實在太有質感了，因此除了非常好奇的去看作者是哪位仁兄外，也想趁這個機會了解google是如何撰寫這個javascript動畫。 繼續閱讀
表單提交(submit)時使用preventDefault可能產生的問題
在表單內的任一輸入框按下Enter後，預設情況下表單會自動提交，若使用preventDefault阻止後，表單將從此不能Submit，怎麼辦？
一般我們設計HTML表單後，若在Form內的文字框按下Enter，預設會觸發Submit事件，造成表單提交。但若有某些文字框我們有特別的用途，希望它按下Enter後不要Submit表單，而是去做一些特定的動作，此時我們可以先使用preventDefault，之後再讓表單可以被Submit嗎？
繼續閱讀
淺談 jQuery圖片延遲載入特效 LazyLoad 原理
LazyLoad特效，其實已經流行好一陣子了，它是一個jQuery的外掛，可以讓還沒出現在畫面上的網頁元素先別載入，直到使用者捲動捲軸，移到該元素時，它才載入。這對於網站上塞滿圖片的人可是一大福音，因為使用LazyLoad技巧，可以提升網站的載入速度。
Wow，這是怎麼辦到的？ 繼續閱讀
SyntaxHighlighter 處理Blogger網誌的程式碼區塊
只要是談軟體需要展示程式碼的網頁，都有syntax highlight(語法突顯)的需求。
這裡也不例外，先前我是使用Online syntax highlighting這個線上syntax highlight工具，很陽春也很簡單，可以滿足最基本的語法顯示效果，你只要把code貼進去，按個鈕就可以拿到html code，把這些html code貼進自己的網誌內就ok，簡單方便。
後來知道google原來也有這種工具，且效果也很好，於是就跑去下載來用了，可以參考一下Google Code裡的SyntaxHighlighter說明。我的安裝方式記錄如下：
1. 下載syntaxhighlighter (目前為止最新版本為1.5.1)
2. 解開後產生三個資料夾，只要將Scripts及Styles內的所有js及css檔找個網頁空間放上去即可，本例使用Google Page來放，申請後放完的情況如下：
3. 登入你的Blogger，進入版面配置/範本/修改HTML，找到</head>把以下程式碼放進</head>標籤的前面：
<link type="text/css"
rel ="stylesheet"
href="http://xxxxx.googlepages.com/SyntaxHighlighter.css" />
<script language='javascript'
src='http://xxxxx.googlepages.com/shCore.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushCpp.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushCSharp.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushCss.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushDelphi.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushJava.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushJScript.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushPhp.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushPython.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushRuby.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushSql.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushVb.js'/>
<script language='javascript'
src='http://xxxxx.googlepages.com/shBrushXml.js'/>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf=
'http://xxxxx.googlepages.com/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
* 請記得要把http://xxxxx.googlepages.com/取代為你的空間
4. 把你想放在網頁上的程式碼準備好，如下面範例加上一些code:
<pre name="code" class="c-sharp"> ... some code here ... </pre>
或是要用textarea(類似留言框架)標籤：
<textarea name="code" class="c-sharp"> ... some code here ... </textarea>
這個例子是套用C#的語法模式，如果想用其他的模式，可把字改為像html, VB等，支援的語法種類可以參考這裡。
另外，在步驟3時，直接把code貼進去並儲存後，code會變得有點"怪怪"的，經實驗證明這不影響功能：
還有就是一定要直接發佈文章後，才能看到syntax highlight的效果，所以預覽若沒效果先別急，發佈了才會知道有沒有成功。一個小小的缺點是，使用SyntaxHighlighter由於是做用client端的電腦作運算(javascript的特性)，所以一般來說開啟有使用SyntaxHighlighter的頁面會多花一點點時間。