先貼專題地址：上古世紀探秘之旅»»»
頁面打開后，跟隨鼠標的移動，背景會有種立體的感覺。

開門見山講原理
在平面上要想表現(xiàn)立體感，就是通過不同的移動速度產(chǎn)生遠近景深的錯覺。
這個特效的核心是通過獲取鼠標的坐標（坐標原點是(0,0)為瀏覽器窗口的左上角），然后以瀏覽器窗口的某一點為中心坐標來計算偏移量，再設置到需要移動的元素上。onmousemove時不停的計算偏移量，就有了移動的效果。

示意圖：（例如瀏覽器窗口1000*600）

如果某元素的移動范圍是左右20px，上下10px，那么鼠標移動到（100,570）時，它就要往左偏16px(-80%*20)，往下偏9px(90%*10)。所以如果有3個元素，上下左右的移動范圍就不一樣，就會有立體的效果。另外遠景和近景位移方向相反也是產(chǎn)生3D效果的方法
（趕腳我解釋的太羅嗦，可以看【簡要demo»»»】代碼里的計算過程）
本專題的中心坐標是瀏覽器窗口的寬65%、高50%處，因為把鼠標當成視角話，那么默認視角是在右側的。

說到坐標....你知道獲取個坐標也有很多方法嗎？offsetX、layerX、pageX、clientX、screenX....IE和FF下還都不一樣呦，具體請看javascript事件對象 坐標事件說明»，經(jīng)過各種實驗各種折騰，最后我選擇了clientX，然后過了很久再看到了《pageX,clientX,offsetX,layerX的那些事》» 結尾那句“只有clientX和screenX 皆大歡喜是W3C標準.其他的,都糾結了.”我有一口血噴出來的趕腳，整出這么多又不兼容又不標準的玩意干嘛...另外搜索的關鍵詞不對也挺坑爹的...

現(xiàn)在來說下本專題
但是這次專題做下來遇到的最大問題不是坐標和IE6（壓根沒想去兼容IE6，你們懂的），而是我朝的網(wǎng)速。
本來想法是背景上的云也分層，讓云有飄的趕腳，但是當zesen辛苦P出來再導成PNG24，立刻傻眼了...400*300的一坨云都能有300K+ Orz..果斷飄不了了。最后已經(jīng)盡力壓縮和犧牲特效掛件了但是圖片總體積還是高達近800K，就我們平均1.4M的網(wǎng)速，光下載這些無法再壓縮圖片都要好幾秒吧...只好寫了個小loading彌補一下等待的焦慮感，但是等待時間還是無法避免的。
想想我們重構同學追求各種極致的優(yōu)化方法，經(jīng)常跪求設計師同學少做點陰影漸變，不要做太大的背景圖、輸出60%品質(zhì)的jpg，歸根結底都是因為網(wǎng)速。阻礙我們工作進步的不光是IE6。。額，跑題了。其實我是想說，如果我們的網(wǎng)速能趕上棒子..的一半，云啊什么的都可以隨便飄了— —。

不過在在這組位移的圖片中，比較值得分享的是用2張jpg來處理遠景和近景的波浪。（近景波浪» ||| 遠景»） 在顏色相近的情況下，紋路的銜接肉眼看不太出來。感謝zesen和某位厲害的前端工程師的idea，這里不提名字了@@

最后擴展下思路

雖然網(wǎng)速和IE6什么的經(jīng)常讓人很糾結，但是用js+div+css做出來的效果還是很絢麗的，并且相對于flash更便于前端人員修改。
最后我默默的希望我朝的IE6能更少些，網(wǎng)速更快些；另外如果你看不到這個特效，請果斷升級下你的IE吧!

這種3D視覺在大背景的專題里效果不錯，其實也可以運用到頁面局部的視覺中，當成一個小小的彩蛋讓瀏覽者自己去發(fā)現(xiàn)。
另外如果素材夠大，也可以加入滾動鼠標中鍵讓所有景物縮小/變大的特效，這樣3D的感覺會更豐富。