- 相關推薦
通過JavaScript特效控制內容展示的11種方法
交互信息結構是一個交互式用戶界面所需要完成的首要任務。更直觀的布局結構設計，能使用戶更好的理解內容。以下是百分網(wǎng)小編搜索整理的通過JavaScript特效控制內容展示的11種方法，供參考借鑒，希望對大家有所幫助!想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網(wǎng)!
“頁面滑動門”， “隱藏的內容”， “圖片和內容滑動門”， “動畫幻燈片”， “傳送帶”， “Tab內容選項卡” ，結合各種拖拽、滑動、燈箱等特效，這就是下面將為你呈現(xiàn)的。
1. jQuery pageSlide(http://halobrite.com/blog/jquery-pageslide/)
jQuery pageSlide 是一個jQuery插件，它可以控制一個隱藏頁面的顯示和關閉。具體來說，就是當前頁占一個完整頁面，隱藏頁是看不到的，你設置一個控制的地方，點擊該控制時觸發(fā)事件，隱藏的頁面就彈出來。再次點擊隱藏頁面以外的空間，它就又關閉。
這適合在有限的空間里，在主頁里放重要內容，而隱藏頁放一些并不一定要顯示，而是有需要的用戶才去展開顯示的內容。當然，我是這么簡單舉個例，你愛怎么用又是另外一回事兒。
2. Create a simple ul list with a nice slide-out effect for 《li》 elements(http://woork.blogspot.com/2008/12/simple-list-with-nice-slide-effect-for.html)
這個教程使用 MooTools slideOut ，實現(xiàn)一個簡單的UL列表，且為每個LI元素添加一個漂亮的點擊隱藏特效。
3. Portfolio Layout Idea Using jQuery(http://benjaminsterling.com/portolio-layout-idea-using-jquery/)
非常漂亮的一個特效布局。由 Benjamin Sterling 創(chuàng)建的這個 portfolio layout 使用了jQuery的 easing plugin. 適合那些想用來展示個人作品集的用戶。
它在頁面兩邊顯示帶縮略的作品列表，當你點擊每個條目時，會在中間部分以退場然后進場的特效呈現(xiàn)出該作品的全部內容。
4. Creating a Slick Auto-Playing Featured Content Slider(http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/)
Niall Doherty的 Coda Slider 為許許多多的設計師帶來了靈感。 Chris Coyier 創(chuàng)建的這個Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ，實現(xiàn)我們常說的”圖片焦點特效”。多用于門戶站。
5. Easy Image or Content Slider(http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider)
這個之前有過介紹，非常平滑，可設置項非常豐富的滑動門特效。
6. mooSlide(http://www.artviper.net/test/mooSlide2/)
mooSlide 是一個可以用來取代“lightbox” 模塊的特效腳本，它擁有許多有趣的功能選項，比如它可以從上或從下面彈出，它支持載入其它頁面的內容等。
7. jQuery.SerialScroll(http://flesler.blogspot.com/2008/02/jqueryserialscroll.html)
jQuery.SerialScroll 可以讓任何元素實現(xiàn)漂亮的動畫移動效果。它使用 jQuery.ScrollTo 來實現(xiàn)移動特效。具體還是看DEMO吧，我也描述的不是很清楚。
8. Agile Carousel(http://plugins.jquery.com/project/agile-carousel)
9. Animated JavaScript Slideshow(http://www.leigeber.com/2008/12/javascript-slideshow/)
這個輕量級的JavaScript動畫幻燈片腳本 包含一系列很酷的功能來樣式化你的內容： 描述支持，鏈接支持，沒有命名限制，肖像圖片支持，縮略圖狀態(tài)等等。
10. Sexy Lightbox 2(http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2)
Sexy Lightbox 2是一個精美的Lightbox克隆，不過它更小巧。 支持顯示圖片和HTML元素，并且完全兼容HTML， 也就是說它可以顯示條目，頁面，視頻和所有其它你想要顯示的東西。超大圖片還可以自適應瀏覽器。需要Mootools框架。
11. UI.Layout(http://layout.jquery-dev.net/)
這個布局腳本的靈感來自于 extJS border-layout. 它可以創(chuàng)建任何你想要的UI外觀-從簡單的標題到側邊欄，到一個應用程序的工具欄，菜單，幫助面板，狀態(tài)欄，提并表單等等。
更多相關文章推薦：
3.如何使用JavaScript實現(xiàn)香港身份格式及真?zhèn)涡则炞C
5.如何使用JavaScript實現(xiàn)頁面定時跳轉
8.如何實現(xiàn)JavaScript的DIV塊來回滾動效果
【通過JavaScript特效控制內容展示的11種方法】相關文章：
JavaScript的應用10-19
用 jsp:include控制動態(tài)內容的方法06-11
如何使用PHOTOSHOP表現(xiàn)LOMO特效08-04
Fireworks殘破紋理特效怎么使用08-05
Fireworks如何制作分解特效技巧07-04
如何檢查JavaScript變量的類型09-19
怎樣學好JavaScript這門語言09-01