超酷的HTML5網站設計

我們已經瞭解很多關於HTML5的技術了，很多人也開始在自己的專案中應用各種HTML5技術。這裡，Design Art Wall收 集了15個採用HTML5實現的網站，當然它們還有非常贊的介面設計，這些網站不僅在coding上，更在設計上能給我們更多的參考，當然，國內很多網站 僅僅是使用了HTML5的doctype而沒有真正的採用HTML5的語義化標籤和更多高級特性。嗯，是時候做更多的嘗試了。

當然，如果你做了或者見到了很棒的採用HTML5技術實現的中文網站，歡迎通過評論回饋給我們，多謝～～

 

Youzee

Brasserie Gerard

Web Designer Wall

1MD

Simple as Milk

DBushell

Humaan

Florida After Seven

Free Agent Central

Our Swiss Life

Mighty in the Midwest

Dunnellon

Love of my life

New Adventures In Web Design

La gente ha dichosi

文章來自前端

文章提供:: BAYSTARS DESIGN網頁設計公司

13個增強Web設計界面的Javascript腳本

1. Easy News

Easy News是一個可以讓您輕鬆顯示網站新聞或圖文內容展示的jQuery插件，可設定Fade In-Out ,Slide Up-Down, Left To Right 的效果，調整顯示速度，可自行修改CSS改變您為喜歡的風格。

2. tableHover (演示地址)

tableHover一個jQuery插件當鼠標經過時，能夠對表格的一整列或行進行著色加亮。支持colspans與rowspans的表格。

3. JxLib (演示地址)

JxLib是一個基於Mootools開發的Web UI庫。類似於jQuery UI、Ext JS或Dijit。擁有豐富文檔和示例。提供的主要UI控件包括：

• layout managers
• buttons
• tabs
• toolbars
• dialogs
• panels
• trees
• grid control

4. Mimic the iGoogle Interface (演示地址)

這是一個可以讓用戶定制界面的組件，類似於iGoogle。

5. Tick Tock (演示地址)

這是一個利用CSS與Javascript開發的漂亮時鐘。

6. jParallax

這是一個用於生成視差現象的jQuery插件。

7. jQuery Keypad

jQuery Keypad一個可以定制外觀的jQuery虛擬鍵盤插件。鍵盤的字母與數字能夠隨機排列。鍵盤能夠以各種動畫效果顯示如：淡入和滑落等。

8. Sliding Login Panel (演示地址)

Sliding Login Panel是一個採用jQuery開發的用戶登錄面板。這個面板能夠從頁面頂部滑落與收縮。

9. Page Peel

可以設置廣告的高度、寬度、背景圖和定位坐標等。和Pageear一樣，使用Flash來顯示果皮剝開的特效。

10. Create a 3D Tag Cloud in jQuery (演示地址)

一個用於創建會滾動的3D標籤雲jQuery插件。

11. Vuzit (演示地址)

Vuzit 是一款在線的文檔瀏覽工具，可適用於絕大部分辦公文檔格式，類似於 Adobe Share，用戶可以從本地上傳各類辦公文檔，直接查閱。這對於本地沒有安裝 PDF、Office 等軟件的用戶來說，是一個不錯的文檔瀏覽途徑。同時，Vuzit 與 Adobe Share 一樣支持上傳的文檔進行分享，提供網頁代碼，讓用戶把文檔內嵌到其他網頁或者自己的 blog 中去。Vuzit 採用了 AJAX 技術，載入速度要比基於 Flash 技術的 Adobe Share 要稍快一些。

12. jQuery Tools (演示地址)

jQuery Tools提供一組當今網站常用到的幾個Web UI控件。而且這些組件單個JavaScript文件只有5.8Kb大小。這些控件包括：tabs、tooltip、overlay（模式對話框）、expose（讓頁面任意元素突出顯示）、Slider、flashembed（簡化Flash插入方法）。

13. jScroller (演示地址)

jScroller是一個可以讓某塊區域中的hmtl內容自動上下/左右滾動的jQuery插件。沒有使用marquee標籤，完全符合w3c標籤。所以可以支持多種瀏覽器。
文章提供: BAYSTARS DESIGN網頁設計公司

如何獲取當前 select 元素的值



如果 select 元素下的所有 option 元素均沒有指定 selected 屬性，會默認選中第一個。

可以通過 select.selectedIndex 獲取到選中的 option 元素的索引。

可以通過 select.options

[select.selectedIndex] 獲取到選中的 option 元素。

option 元素 <option selected="selected" value="value3″>text3</option>，可以通過 option.value 獲得 option 元素的 value 屬性值，即 value3；可以通過 option.text 獲得 option 元素內的文本，即 text3。

如果 option 元素沒有定義 value 屬性，則 IE 中 option.value 無法獲得，但 Safari、Opera、FireFox 依舊可以通過 option.value 獲得，值同於 option.text 。

可以通過 option.attributes.value && option.attributes.value.specified 來判斷 option 元素是否定義了 value 屬性。

故，獲得當前 select 元素值的腳本如下：

程序代碼

var getSelectValue = funtion(select) {
    var idx = select.selectedIndex,
        option,
        value;
    if (idx > -1) {
        option = select.options[idx];
        value = option.attributes.value;
        return (value && value.specified) ? option.value : option.text);
   }
    return null;
}

原文：需要點這裡…

文章提供: BAYSTARS DESIGN網頁設計公司