通过JavaScript特效控制内容展示的11种方法

　　交互信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计，能使用户更好的理解内容。以下是百分网小编搜索整理的通过JavaScript特效控制内容展示的11种方法，供参考借鉴，希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生考试网!

　　“页面滑动门”， “隐藏的内容”， “图片和内容滑动门”， “动画幻灯片”， “传送带”， “Tab内容选项卡” ，结合各种拖拽、滑动、灯箱等特效，这就是下面将为你呈现的。

　　1. jQuery pageSlide(http://halobrite.com/blog/jquery-pageslide/)

　　jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的.，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。

　　这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。当然，我是这么简单举个例，你爱怎么用又是另外一回事儿。

　　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 ，实现一个简单的UL列表，且为每个LI元素添加一个漂亮的点击隐藏特效。

　　3. Portfolio Layout Idea Using jQuery(http://benjaminsterling.com/portolio-layout-idea-using-jquery/)

　　非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。

　　它在页面两边显示带缩略的作品列表，当你点击每个条目时，会在中间部分以退场然后进场的特效呈现出该作品的全部内容。

　　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 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件，实现我们常说的”图片焦点特效”。多用于门户站。

　　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 可以让任何元素实现漂亮的动画移动效果。它使用 jQuery.ScrollTo 来实现移动特效。具体还是看DEMO吧，我也描述的不是很清楚。

　　8. Agile Carousel(http://plugins.jquery.com/project/agile-carousel)

　　9. Animated JavaScript Slideshow(http://www.leigeber.com/2008/12/javascript-slideshow/)

　　这个轻量级的JavaScript动画幻灯片脚本包含一系列很酷的功能来样式化你的内容：描述支持，链接支持，没有命名限制，肖像图片支持，缩略图状态等等。

　　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. 它可以创建任何你想要的UI外观-从简单的标题到侧边栏，到一个应用程序的工具栏，菜单，帮助面板，状态栏，提并表单等等。

通过JavaScript特效控制内容展示的11种方法

更多相关文章推荐：