2011年1月20日 星期四

jQuery_簡單的選單效果、移動的遮罩、動態的DIV

最近看到一些不錯的版面,加上又正在上jQuery的課程,所以很想用jQuery來試試看可不可以做出希望的效果,做來做去也搞不清楚主題是什麼了。XD

別的人版面當然不能放上來,我只好利用"最專長"的手繪來展示一下:
1. Menu選單在下面的版,上面有一張精美的大圖,重點是當選到各選項時,會有一個類似遮罩的區塊,在大圖上面移動,然後上面帶有一些簡單的文字與圖片。

2. 右邊有一個台灣,上面有許多景點的位置,碰到景點會有一個強調的動畫,然後會跳出一個浮動說明框,左邊的區塊"應該"是隨著景點的點選做更詳盡的說明。

我想,有著簡單的說明配合精美的手繪資料,應該非常清楚我想要做出怎樣的功能吧?

內容包含:
1. 動態增加景點資料(我用DIV)於頁面上。
2. 滑鼠移上景點時,改變title內容及強調景點。
3. 點選圖上的景點,則連接WebService顯示資料庫內的相關資訊於滑鼠坐標處。
4. 滑鼠移到選單上時改變選單圖示,並用一個帶點透明的遮罩顯示相關訊息於頁面上。
5. 當更換選擇的項目時,上述遮罩移動至設定位置。

效果如下:


最近上jQuery的感想就是:jQuery很強大、男丁老師也很強大。 XD

2 則留言:

kolen 提到...

你手繪的台灣,好像蕃薯喔,還有洞洞,XD。

ola的家 提到...

那叫做"景點",看到那些點點,你不會很想去嗎? (抓頭)

張貼留言