【译】10种超棒的提高你的用户界面外观的javascript技术

原文：By Glen Stansberry ifishing

javscript可以为你的网站增添很多可以提高用户体验的特效。以下就是10种简单漂亮的能为你的网页增加可用性的javascript技术。 javascript在网站开发中通常被认为是一种装饰性语言。这一就意味着网站开发工作者总仅仅使用javascript做着一件事情：提高用户的体验。从用户界面方面来说有很多很棒的很有用的方法来使一个站点工作的很好。一个开发者可以找遍所有的jiavascript来实现他所想实现的东西。

图片预览 miusam-ck.

无可置疑，javascript确实是一个强大、易用的脚本语言。它可以实现简单的、漂亮的功能像是改变一个物体的显隐性，它甚至可以即时传送数据。javascript可以很简单，也可以很高级，它可以随着你的想法而变换。

javascript框架

你可以遍历所有的js框架和它们的插件及文档来找到可以提高你的站点性能的js技术。下面的js框架就含有丰富的资源、插件，并且有很大的用户群体：

Dojo
Prototype Scriptaculous
jQuery MooTools

这些js框架为那些想为他们的布局快速添加js效果但又不想用太多原生的js代码的开发人员或者设计者们提供了很大的方便。我们使用的下面的这些js技术大多数都是在js框架像是jQuery或者MooTools的基础上运行的。

使用户体验良好的的js技术

1.jQuery标签云鼠标悬停菜单效果：

jQuery hover sub tag cloud是一个是一个不错的例子，它向我们展示了一些简单的js代码为标签云增添了漂亮的悬停效果。当用户把鼠标放在某一个特定的标签上面时候就会产生一个与之联系的说明菜单，一个弹出框出现解释了标签的意思。简单有效。

源代码 例子展示



2.改变透明度

透明度变化是一个小小的向我们展示怎样使用脚本来改变一个元素透明度变化的教程。

我们在网页中需要一个元素的透明度变化可能有很多的原因：展示一个元素鼠标悬停的内容，展示一个被点击过的元素的内容一个其他的一些用处。 源代码



3.图片上传和剪裁

上传一张图片之后剪裁它，这个功能在很多网络应用中都会用到，这就是为什么jQuery的 jQuery image upload and crop 技术被广泛使用的原因。剪裁图片在一般的上传图片之后都会用到，所以很多网络应用都受益于这项jQuery技术并且把它使用与实际。

说实话，我认为所有的上传图片功能都应该有一个剪裁功能。但是，图片剪裁功能并不是一个易于添加的简单的js功能。他涉及到对各种应用的加工，使用了图片库和js结合。使用这个jQuery框架为基础的脚本可以为网站的用户体验增添不少的亮点而不必使用大量的额外的代码。源代码 演示



4.密码强度测量

随着黑客们变得越来越"聪明",越来越多。用户选择强有力的、包含字母、数字和特殊字符的密码也就变得越来越有必要了。但是，这项技术做起来远远比说起来难。

在填写注册表单时候把用户密码的强度以可视化的形式展示出来是一个不错的方式来鼓励用户把自己的密码变得更加强有力。

密码强度测量是工作在Prototype框架上的一个轻量级的可以实时展示密码强度的小型脚本。越来越多的站点使用了这个“安全”的脚本来帮助用户看作弱密码的风险。 演示例子



5.魔法获焦（局部放大效果）

魔法获焦 是一个在像电子商务网站这样以及其他的一些有很多具体图片来传递消息的网站里面广泛使用的脚本技术。这项技术可以不让用户额外点击其他的地方就可以看到局部放大的图片，节省了带宽。它实际上是让你通过一个放大镜来观察每一个图片。

这项技术是一个付费的脚本技术，但是你也可以下载下面的这个实验版本。 源码 演示例子



6.Jquery的自动按下tab键的效果

互联网上的每一个表单都应该使用这一项技术，也许仅仅我这样认为。但是当我们有很多表单需要填写时，这应该是一项很必要的技术。假如当我们在填写身份证号码时光标会自动跳到下一个合适的输入位置，那将是一件多么冷人高兴的事情啊。

有时候它在开发的时候也许是一件非常小的事情，但是他确实可以令用户有不一样的感受。 源码 演示例子



7.难以置信的js登录窗体

js登录表单是jQuery和漂亮的photoShop布局的完美结合，它的目的就是要向用户展示一个替代占据大部分页面的盒子的登录窗体。DIGG就是这项技术的有一个使用者。源码 演示例子



8.高亮的web登录窗体

表单在网页设计中是一个难题，假如你的表单冗长会使你失去相当大一部分的用户；如果你的表单没有吸引力也会使你失去一些用户。不论怎么样，我们可以用一些技术来使我们的表单看上去更有吸引力。

高亮的web登录窗体就是一个优秀的登录窗体。它是用户可以很方便的看到表单填写到哪一步，吸引住了用户。

源码 演示例子



9.滑动的顶部面板

滑动的顶部面板很像是不可思议的js登录窗体。显示/隐藏在漂亮、有用的设计中是一个重点。我们随时都可以使用js来吧不必要的信息优雅的隐藏起来，我们应该努力去这样做的。 源码 演示例子



10.社交历史

网站推广按钮和链接充斥了我们网站的布局。看起来好像假如你想在像Digg或者Delicious这样的网站上推广你博客的帖子和其他的内容，你就必须在你的网站的模板上面增加一长串的按钮以确保你不会把任何人的喜爱的社交书签或者站点遗漏在外。

社交历史迟早都会有用的，因为它进行一个测验来找到最近用户都在哪个网站逗留并且会显示这些网站的图片（仅仅这些网站）。也就是说，它仅仅向用户展示用户想要访问的站点。源码 演示例子

SocialHistory.js怎么会知道呢？它使用了css效果所展示的信息。访问过后的链接颜色跟没有访问过的不一样。你所作的就是为那些最受大众欢迎的社交网站在一个iframe中加载进来一大堆的Url，看看这些链接中那些是紫色的，那些是蓝色的。