交付信息結(jié)構(gòu)是一個(gè)交互式用戶界面所需要完成的首要任務(wù)。更直觀的布局結(jié)構(gòu)設(shè)計(jì)，能使用戶更好的理解內(nèi)容。
不管你想要介紹的是什么樣的內(nèi)容，你都可以以更加互動(dòng)和更加適應(yīng)的方式去呈現(xiàn)現(xiàn)它。本文里面，網(wǎng)頁(yè)設(shè)計(jì)為你收集整理了11種高超的javascipt技術(shù)，讓你更好的控制內(nèi)容的顯示方式，以便用于下一次的布局設(shè)計(jì)。
“頁(yè)面滑動(dòng)門”, “隱藏的內(nèi)容”, “圖片和內(nèi)容滑動(dòng)門”, “動(dòng)畫(huà)幻燈片”, “傳送帶”, “tab內(nèi)容選項(xiàng)卡” ，結(jié)合各種拖拽、滑動(dòng)、燈箱等特效，這就是下面將為你呈現(xiàn)的。
1. jquery pageslide
jquery pageslide 是一個(gè)jquery插件，它可以控制一個(gè)隱藏頁(yè)面的顯示和關(guān)閉。具體來(lái)說(shuō)，就是當(dāng)前頁(yè)占一個(gè)完整頁(yè)面，隱藏頁(yè)是看不到的，你設(shè)置一個(gè)控制的地方，點(diǎn)擊該控制時(shí)觸發(fā)事件，隱藏的頁(yè)面就彈出來(lái)。再次點(diǎn)擊隱藏頁(yè)面以外的空間，它就又關(guān)閉。這適合在有限的空間里，在主頁(yè)里放重要內(nèi)容，而隱藏頁(yè)放一些并不一定要顯示，而是有需要的用戶才去展開(kāi)顯示的內(nèi)容。當(dāng)然，我是這么簡(jiǎn)單舉個(gè)例，你愛(ài)怎么用又是另外一回事兒。
要查看demo，你可以進(jìn)入這個(gè)插件的主頁(yè)，點(diǎn)擊“click for a pageslide demo.”這個(gè)鏈接。
2. create a simple ul list with a nice slide-out effect for <li> elements
這個(gè)教程使用 mootools slideout() ，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的ul列表，且為每個(gè)li元素添加一個(gè)漂亮的點(diǎn)擊隱藏特效。3. portfolio layout idea using jquery
非常漂亮的一個(gè)特效布局。由 benjamin sterling 創(chuàng)建的這個(gè) portfolio layout 使用了jquery的 easing plugin. 適合那些想用來(lái)展示個(gè)人作品集的用戶。它在頁(yè)面兩邊顯示帶縮略的作品列表，當(dāng)你點(diǎn)擊每個(gè)條目時(shí)，會(huì)在中間部分以退場(chǎng)然后進(jìn)場(chǎng)的特效呈現(xiàn)出該作品的全部?jī)?nèi)容。
查看demo
4. creating a slick auto-playing featured content slider
niall doherty的 coda slider 為許許多多的設(shè)計(jì)師帶來(lái)了靈感. chris coyier 創(chuàng)建的這個(gè)slick auto-playing featured content slider 使用 coda slider插件 ，實(shí)現(xiàn)我們常說(shuō)的”圖片焦點(diǎn)特效”。多用于門戶站。查看demo
5. easy image or content slider
這個(gè)之前有過(guò)介紹，非常平滑，可設(shè)置項(xiàng)非常豐富的滑動(dòng)門特效。詳情看這里。6. mooslide
mooslide 是一個(gè)可以用來(lái)取代“lightbox” 模塊的特效腳本，它擁有許多有趣的功能選項(xiàng)，比如它可以從上或從下面彈出，它支持載入其它頁(yè)面的內(nèi)容等。查看demo
|||
7. jquery.serialscroll
jquery.serialscroll 可以讓任何元素實(shí)現(xiàn)漂亮的動(dòng)畫(huà)移動(dòng)效果。它使用 jquery.scrollto 來(lái)實(shí)現(xiàn)移動(dòng)特效。具體還是看demo吧，我也描述的不是很清楚。
查看demo
8. agile carousel
agile carousel 之前也介紹過(guò)?？?font color="#336699">這里。
9. animated javascript slideshow
這個(gè)輕量級(jí)的javascript動(dòng)畫(huà)幻燈片腳本 包含一系列很酷的功能來(lái)樣式化你的內(nèi)容: 描述支持，鏈接支持，沒(méi)有命名限制，肖像圖片支持，縮略圖狀態(tài)等等。
查看demo
10. sexy lightbox 2
sexy lightbox 2是一個(gè)精美的lightbox克隆，不過(guò)它更小巧. 支持顯示圖片和html元素，并且完全兼容html, 也就是說(shuō)它可以顯示條目，頁(yè)面，視頻和所有其它你想要顯示的東西。超大圖片還可以自適應(yīng)瀏覽器。需要mootools框架。
查看demo
11. ui.layout
這個(gè)布局腳本的靈感來(lái)自于 extjs border-layout. 它可以創(chuàng)建任何你想要的ui外觀-從簡(jiǎn)單的標(biāo)題到側(cè)邊欄，到一個(gè)應(yīng)用程序的工具欄，菜單，幫助面板，狀態(tài)欄，提并表單等等。
英文譯文: 10 smart javascript techniques for manipulating content /noupe
