顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2012年2月16日 星期四

JS+CSS練習 - 米蘭數位官網HTML版本



持續的玩CSS及JS中。



因此拿了米蘭的官網來練習。
米蘭官網連結在這ㄦ - http://medialand.com.tw/home.htm
練習結果在這ㄦ - http://labs.medialand.com.tw/jason/html/ml/

比官網少了一些單元,因為跟資料庫要資料的部份我(目前)懶得去寫…。
一開始我傻傻的,想說在畫面上轉來轉去的那些球,「搞不好」可以直接用dom來跑就好,畢竟只是scale的縮放,沒有複雜的變形,只要把透視給算好就ok了。
於是就試寫了第一版,下場就是效能十分之慘。
苗頭不對之下,只好乖乖的用canvas來處理這些轉圈圈,效能果然好很多了。但由於老IE不支援canvas,所以我仍然保留原本的dom版本,只要判斷瀏覽器不支援canvas,就會把dom拿出來跑…。

練習的作品我是盡量把它寫得很像原本flash版本的效果,我也是用像寫AS的概念一樣去安排配置畫面上的東西,但只能盡量,多少還是有一點點的差異,不過畢竟是練習作,練習中學到的經驗比較重要。
主要的一些(奇怪的)心得就是:
1. 把div當成DisplayContainer來用XD…。
2. 空白的div可以拿來當按鈕感應區…。
3. 還沒找到很好用的tween(好啦,我自己也沒很用心的去找),現在只能自己用setInterval去跑,或是簡單的就交由JQuery的animate去跑。
4. Canvas要判斷滑鼠是否over到某顆球上的這件事,小麻煩啊…,尤其是兩顆球如果疊在一起就更討厭了,現在只是球狀還好,之後如果寫到複雜圖案的時候,就會又點傷腦。
5. 除了canvas以外,其它的東西其實一熟練的話處理起來還算快,反正遇到困難的結構就是二話不說多加幾個div來當DisplayContainer!!(但我先說,這可能不是很正統的做法XD)

2011年12月7日 星期三

用CSS取消上層dom物件的滑鼠感應



因為之前寫ZooKeeper的關係,其實有一個地方有點困擾,就是html的dom沒有辦法像flash的movieclip一樣改變滑鼠感應區,所以導致z-index在較高的dom會擋到下方的dom讓它無法被點擊到。
這兩天想到了這個問題又繼續在google上找解法。

找來找去好像並沒有找到太有用的解,倒是找到了一個CSS語法可以將整個dom的滑鼠感應區取消掉。
pointer-events:none;
把這一行加到要被取消的dom元件裡的CSS就好了。
這個東西好像是SVG的東東,所以目前只有FF/Chrome/Safari有支援,IE很杯具的7/8/9都不適用。所以並不是很好的解,但目前為只大概也只能先這樣(攤手)。

2011年11月29日 星期二

CSS+JQuery練習ZooKeeper(寶石方塊)



好久沒動這個Blog了,草都長得跟人一樣高了。

最近在玩CSS跟JQuery,玩一玩覺得挺有趣的,JQuery果然十分的強大,用JQuery來寫js真的可以省下很多事。CSS的position有時雖然有點惱人,但是把它當成一整個display container的話,其實也沒有想像中的麻煩,加上JQuery的話甚至可以把它當成flash來寫…。

所以就給自己一個練習,寫了一個ZooKeeper(我習慣叫這種遊戲叫「寶石方塊」XD,圖案是直接拿ZooKeeper來用),沒有加入GameOver及分數的判斷,因為那純粹只是邏輯,跟練習CSS+JQuery無關。效能上也沒有tune過,就是用陣列一直掃就對了。


有興趣的可以點過去玩玩,Code都在原始碼裡
CSS+JQuery練習ZooKeeper