当前位置:96看吧 > 技术文档 > 网页制作 > 控制内容展示的JavaScript特效技巧

控制内容展示的JavaScript特效技巧

时间:2009/02/08
作者:www.parandroid.com
来源:www.noupe.com
查看:
标签:javascript

交互信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计,能使用户更好的理解内容。不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它。

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

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

JavaScript特效 

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) 

JavaScript特效 

这个教程使用 MooTools slideOut ,实现一个简单的UL列表,且为每个LI元素添加一个漂亮的点击隐藏特效。

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

JavaScript特效 

非常漂亮的一个特效布局。由 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/) 

JavaScript特效 

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) 

JavaScript特效 

这个之前有过介绍,非常平滑,可设置项非常丰富的滑动门特效。

6. mooSlide(http://www.artviper.net/test/mooSlide2/index.html) 

JavaScript特效 

mooSlide 是一个可以用来取代“lightbox” 模块的特效脚本,它拥有许多有趣的功能选项,比如它可以从上或从下面弹出,它支持载入其它页面的内容等。

7. jQuery.SerialScroll(http://flesler.blogspot.com/2008/02/jqueryserialscroll.html) 

JavaScript特效 

jQuery.SerialScroll 可以让任何元素实现漂亮的动画移动效果。它使用 jQuery.ScrollTo 来实现移动特效。具体还是看DEMO吧,我也描述的不是很清楚。

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

JavaScript特效

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

JavaScript特效 

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

10. Sexy Lightbox 2(http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2) 

JavaScript特效 

Sexy Lightbox 2是一个精美的Lightbox克隆,不过它更小巧。 支持显示图片和HTML元素,并且完全兼容HTML, 也就是说它可以显示条目,页面,视频和所有其它你想要显示的东西。超大图片还可以自适应浏览器。需要Mootools框架。

11. UI.Layout(http://layout.jquery-dev.net/) 

JavaScript特效 

这个布局脚本的灵感来自于 extJS border-layout. 它可以创建任何你想要的UI外观-从简单的标题到侧边栏,到一个应用程序的工具栏,菜单,帮助面板,状态栏,提并表单等等。

上一篇:网站常用广告位尺寸
下一篇:2009年值得关注的10个平面设计博客
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门