用户体验在近几年得到了迅速的改善，主要体现在丰富的的用户交互界面上。AJAX, javascript以及CSS的广泛应用为用户提供了先进的，尖端的以及专业的动态交互界面解决方案。

之前已经有了很多文章来介绍一些令人惊叹的 javascript, Ajax和CSS技术以及哪里可以找到这些技术的使用方法。今天，我们将来看看10个极具创意且UI界面功能丰富的网站，以及如何使用文中提到的技术来制作类似的交互效果。

1. Alex Buga (滑移，可拖动的页脚以及动态按钮)

在这个绝对难以置信的设计中你会看到:

• 1.1 一个具有美观的动态悬浮效果的菜单

制作方法 » 使用超级弹性特效制作极具视觉冲击的网页菜单

该教程讲解了如何使用几行Javascript代码以及MooTools库来设计一个令人振奋的弹性菜单。



查看演示

• 1.2 滑动的文章显示面板

制作方法 » 漂亮的动态周线表

该教程向你讲述了如何设计一款带美观的，带有每日注释的动态周记，你可以在你的网站中使用该方法进行自定义设置。



查看演示

• 1.3 可以拖动的页脚

制作方法 » 事件委派表中的拖拽以及调整大小

只有父元素在控制事件。在本例中将由编辑容器内的元素来控制事件。如果你向你的容其中添加动态的元素，你无需再附上任何事件。



查看演示

2. Ricoverdeo (幻灯效果)

一个非常简洁的滑动效果，并且使用了大量的插图作为辅助。

• 2.1 在悬浮元素上添加简单的滑动效果

制作方法 » Easy Slider 1.5 – 简单的制作图片与内容滑动的jQuery插件

Easy Slider (我对这款插件的叫法)可以使图片或者任何内容通过点击或自动在水平或垂直方向上滑动。主要特性包括：连续滑动，“go to first”和”go to last”按钮，隐藏控制工具，可选的控制按钮的代码标记，在同一页面上垂直滑动或出现多多种滑动。



查看演示

3. jasonreedwebdesign (滑动标签，折叠面板)

Jason Reed在他的个人作品集上使用了一款流行的折叠面板效果允许用户进行页面导航。他还在折叠面板内使用了一款非常漂亮的滑动标签来增强界面结构。

• 3.1 互动标签

制作方法 » 自动滑动标签

滑动标签是一个mootools插件，可以添加一些漂亮简洁的效果。它和Panic Software’s Coda网站上的滑动效果相似。另外，它还可以在固定的时间间隔内自动滑移。



查看演示

• 3.2 折叠面板

制作方法 » 垂直折叠面板

该款插件提供了一些简单的选项来改变折叠面板的外观和动作。



制作方法 » 使用Mootools制作折叠面板

4. Dragon Interactive (动态菜单)

我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。

• 3.1 动态菜单

制作方法» 使用jQuery制作动态菜单



查看演示

5. DesignShack (切换页面布局)

大多数CSS图库网站都会提供给用户改变页面布局的功能，从而使用户可以更加轻松，迅速的获取信息。 ƒ

• 5.1 转换页面外观

制作方法 » 使用CSS和jQuery显示转换钮

通过使用CSS和jQuery让用户切换页面布局。



查看演示

6. Profoto (面包屑Breadcrumbs)

Profoto有一个独特的面包屑(breadcrumb)菜单。点击面包屑链接的时候会在它的下方打开一个区域，给用户一些附加属性进行选择。

• 6.1 面包屑Breadcrumb

制作方法 » jBreadCrumb

jBreadCrumb是一款jQuery插件，可以通过更为灵活和聪明的方式来显示面包屑 。



查看演示

7. Shelfari (混合按钮)

Shelfari具有一个非常有趣的混合按钮/向下滑移的菜单来显示对书籍的执行动作。如果你查看代码你会发现选择框那里并没有使用一个输入框，而仅仅使用了背景图片。

• 7.1 自定义表单元素

制作方法» Custom Form Elements

曾经总是在好奇如何可以按照自己的方式定义表单元素，如选择框，多选框以及选择区域。Custom Form Elements通过使用Javascript和CSS来提升基于网页的XHMTL表单的样式及可用性。



查看演示

8. CSS Ninjas (费用预估滑杆)

CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。

• 8.1 滑杆

制作方法 » jQuery UI 1.7 Slider

该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。



查看演示

9. Facebook (表单自动完成)

Facebook的地址自动完成表单是表单自动完成的最好案例。

• 9.1 表单自动完成

制作方法 » FCBKcomplete v 1.09

一款有趣的facebook样式的动态输入框，可以自动完成或预载值。



查看演示

10. Design Flavr (Smooth Slideshow)

DesignFlavr, 一个非常有名的设计灵感资源网站，使用了一个淡入淡出的幻灯效果来展示他们的特色作品以及相应的作品描述。

• 10.1 Smooth Slide

制作方法 » s3Slider

s3Slider是一款免费的jQuery插件，可以实现交互渐变的幻灯效果。



查看演示

[原文链接]