交付信息結構是一個交互式用戶界面所需要完成的首要任務。更直觀的布局結構設計，能使用戶更好的理解內容。

不管你想要介紹的是什么樣的內容，你都可以以更加互動和更加適應的方式去呈現現它。本文里面，我們為你收集整理了11種高超的JavaScipt技術，讓你更好的控制內容的顯示方式，以便用于下一次的布局設計。

“頁面滑動門”, “隱藏的內容”, “圖片和內容滑動門”, “動畫幻燈片”, “傳送帶”, “Tab內容選項卡” ，結合各種拖拽、滑動、燈箱等特效，這就是下面將為你呈現的。

1. jQuery pageSlide

jQuery pageSlide 是一個jQuery插件，它可以控制一個隱藏頁面的顯示和關閉。具體來說，就是當前頁占一個完整頁面，隱藏頁是看不到的，你設置一個控制的地方，點擊該控制時觸發事件，隱藏的頁面就彈出來。再次點擊隱藏頁面以外的空間，它就又關閉。

?

這適合在有限的空間里，在主頁里放重要內容，而隱藏頁放一些并不一定要顯示，而是有需要的用戶才去展開顯示的內容。當然，我是這么簡單舉個例，你愛怎么用又是另外一回事兒。

要查看DEMO，你可以進入這個插件的主頁，點擊“Click for a pageSlide demo.”這個鏈接。

---

2. Create a simple ul list with a nice slide-out effect for <li> elements

這個教程使用 MooTools slideOut() ，實現一個簡單的UL列表，且為每個LI元素添加一個漂亮的點擊隱藏特效。

?

3. Portfolio Layout Idea Using jQuery

非常漂亮的一個特效布局。由 Benjamin Sterling 創建的這個 portfolio layout 使用了jQuery的 easing plugin. 適合那些想用來展示個人作品集的用戶。

?

它在頁面兩邊顯示帶縮略的作品列表，當你點擊每個條目時，會在中間部分以退場然后進場的特效呈現出該作品的全部內容。

查看DEMO

4. Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty的 Coda Slider 為許許多多的設計師帶來了靈感. Chris Coyier 創建的這個Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ，實現我們常說的”圖片焦點特效”。多用于門戶站。

?

查看DEMO

5. Easy Image or Content Slider

這個之前有過介紹，非常平滑，可設置項非常豐富的滑動門特效。詳情看這里。

?

6. mooSlide

mooSlide 是一個可以用來取代“lightbox” 模塊的特效腳本，它擁有許多有趣的功能選項，比如它可以從上或從下面彈出，它支持載入其它頁面的內容等。

?

查看DEMO

7. jQuery.SerialScroll

jQuery.SerialScroll 可以讓任何元素實現漂亮的動畫移動效果。它使用 jQuery.ScrollTo 來實現移動特效。具體還是看DEMO吧，我也描述的不是很清楚。

?

查看DEMO

8. Agile Carousel

Agile Carousel 之前也介紹過。看這里。

?

---

9. Animated JavaScript Slideshow

這個輕量級的JavaScript動畫幻燈片腳本 包含一系列很酷的功能來樣式化你的內容: 描述支持，鏈接支持，沒有命名限制，肖像圖片支持，縮略圖狀態等等。

?

查看DEMO

10. Sexy Lightbox 2

Sexy Lightbox 2是一個精美的Lightbox克隆，不過它更小巧. 支持顯示圖片和HTML元素，并且完全兼容HTML, 也就是說它可以顯示條目，頁面，視頻和所有其它你想要顯示的東西。超大圖片還可以自適應瀏覽器。需要Mootools框架。

?

查看DEMO

11. UI.Layout

這個布局腳本的靈感來自于 extJS border-layout. 它可以創建任何你想要的UI外觀-從簡單的標題到側邊欄，到一個應用程序的工具欄，菜單，幫助面板，狀態欄，提并表單等等。

?

英文譯文:? 10 Smart Javascript Techniques For Manipulating Content /Noupe

中文翻譯:? 11種控制內容展示的JavaScript特效和技巧/帕蘭映像

轉載于:https://www.cnblogs.com/CB/archive/2009/02/05/1384269.html

總結

以上是生活随笔為你收集整理的11种控制内容展示的JavaScript特效和技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。