交付信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计,能使用户更好的理解内容。
不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它。本文里面收集的11种高超的JavaScipt技术,让你更好的控制内容的显示方式,以便用于下一次的布局设计。
“页面滑动门”, “隐藏的内容”, “图片和内容滑动门”, “动画幻灯片”, “传送带”, “Tab内容选项卡” ,结合各种拖拽、滑动、灯箱等特效,这就是下面将为你呈现的。
1. jQuery pageSlide
jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。
这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。
2. Create a simple ul list with a nice slide-out effect for#lt;li#gt;elements
这个教程使用 MooTools slideOut() ,实现一个简单的UL列表,且为每个LI元素添加一个漂亮的点击隐藏特效。
3. Portfolio Layout Idea Using jQuery
非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。
它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。
4. 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
可设置项非常丰富的滑动门特效。
本文来源:不详 作者:佚名