上面的网站在中有很多地方都应用了这种效果。看起来是不是很酷。OK，进入正题；
在这里我用一个简单的实例来分析下，先看下我们要用到的这张图。

我们把背景切换的两张图做成一张。这样的好处我以前也有说过了。详见“CSS中关于背景图的应用技巧”；接下来要做的是写结构和样式部分。

这里的样式，应该不需要作解释了。很简单的一个样式！下面是结构；

关健是JQ部分，我们来看代码：

看起来是不是很简单。其原理就在链接内部再插入一个元素。并通过改变这个元素的透明度来实现。有点像FLASH里的遮罩效果。最后点击下面的链接来看下效果；

http://leotheme.cn/wp-content/uploads/Example/js/dragoninteractive/

您可能也喜欢：
用jQuery实现个性有序列表	jQuery 实现 tab 切换一例	jQuery中queue和dequeue的用法	用jquery写一个简单的菜单伸缩效果	用jQuery处理文本框的焦点[focus]状态
无觅

相关文章

• 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
  对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
• 2008-11-20 -- 增强用户体验之文章内的链接 (29)
  我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...
• 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
  今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
• 2011-08-17 -- Flight主题更新 (16)
  这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
• 2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
  已更新为2.7...

1. 新窗口打开
优点：用户点链接的时候，当前浏览的内容不会被替换，不需要通过前进、后退去看自己看过的内容；
缺点：访问一会，就会产生大量窗口，占用资源。每个窗口都需要手动关闭；
2. 当前窗口打开

优点：可以一直在一个窗口内看内容，不会打开很多窗口、占用太多资源。窗口只有一个，关闭容易；
缺点：当用户需要看几个页面的内容，或者需要对比着看的时候，就很麻烦。或者必须按住SHIFT点击链接，但很少人知道和使用该操作；
3. 有选择的使用新窗口和当前窗口
优点：可以比较人性化的解决以上两种方式所带来的不便。不会大量增加窗口数量，同时用户也可以在多个窗口切换阅读；
缺点：用户在点某个链接时的需求未必与设计人员的想法完全一样。用户无法确定到底现在这个链接是在新窗口还是当前窗口打开，给用户造成一定的心理“压力”。

二、如何选择链接打开方式

对于同类型的信息，使用同样的链接打开方式；
中国人更接受链接在新窗口打开的方式；
以下情况使用新窗口打开：

频道的内容链接、导航链接、文章内延伸阅读的链接、文章的相关内容链接、在用户需要对同类型产品进行比较时；

以下情况使用当前窗口打开：

文章的分页标签、列表的翻页标签、文章的上/下一篇文章的链接、线性的任务（用户注册、发布信息等）、当链接属于用户线性的阅读/操作需要时。

三、链接可用性设计指南

使用有意义的、易于理解、容易识别的链接标签；
保证链接标签和链接到的页面标题是相吻合的；
不要误导用户去点击不是链接的文本、图片；
重复重要的链接；
尽量使用文字作为链接的标签；
使用不同的颜色区分用户未使用/使用过的链接；
提供一致的链接标签；
使用“pointing-and-clicking”的方式让用户打开链接；
使用合适的链接长度，一个链接的文字标签不要超过一行；
告诉用户哪些是内部链接、哪些是外部链接；
如果页面上有一张图片是有链接的，那么就要保证页面上的所有图片都是可点击的。

四．新观点

让用户自己去选择如何打开链接。例如设计师为用户提供一个询问-盒子（a small check-box），让用户来决定链接如何打开。
一些网站使用图标对链接的性质进行描述和指引。如我之前写过一篇文章(增强用户体验之文章内的链接)，采用小箭头的形式来和站内的链接进行区分。如果是外部链接就在新窗口中打开，而内部链接就在自身窗口中打开。

您可能也喜欢：

去掉链接时虚线框的几个方法

巧妙设计你的链接[seo]

增强用户体验之文章内的链接

一个显示友情链接RSS的WP插件

关于Tab(选项卡)的一些实现方式

无觅

相关文章

• 2009-08-28 -- jQuery实现背景图渐变切换 (10)
  链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
• 2008-11-20 -- 增强用户体验之文章内的链接 (29)
  我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...
• 2008-10-13 -- 巧妙设计你的链接[seo] (2)
  一般来说，用户浏览网页时只选择浏览最重要的信息或比较容易发现、瞬间可至的信息，他们必须要能够对网页内容做出一个快速评估，找到他们正在寻找的信息并转到另一个网页中去。通常情况下，网络作家会使用超文本链接...

我们知道，链接A的属性里有一个target=”_blank”。我们可以通过给链接添加这个属性来让链接在新窗口中打开。但这样为每个链接添加一个这样的属性并不是件轻松的事。而且还有个弊端：给A标签里面加target=”_blank”针对W3C标准是不合法的。那该如何解决呢？别急！跟着我来一步一步解决问题。

第一步：我们先要让文章里的链接全部在新窗口中打开：

第二步：给文章里的链接添加一个标识符
这个我们可以直接在CSS里定义

现在文章里所有的链接都在新窗口中打开了，并且还带了一个标识的图标。但这并不是我们想要的，因为我们只想把标识符给外部链接并且内部链接是在自身窗口中打开的。继续下一步；

第三步：去掉内部链接的标识符

做这一步前我们首先要做的是区分文章里的链接是内部链接还是外部链接。这个可以用jQuery的选择器来区分，以我的BLOG为例：内部链接的href里肯定会包含我的域名（http://leotheme.cn）里的leotheme这个字符串。知道了这个我们就可以写代码了：

好了，现在内部链接没有标识符了，但还是会在新窗口中打开，继续。。。

第四步：让外部链接在新窗口中打开，内部链接在自身窗口打开

这一步的实现有一点点的复杂，当然如果你对jQuery非常熟悉的话还是非常简单的。前面我们在第一步已经实了文章所有链接在新窗口中打开了。但我们其实需要的只是外部链接在新窗口中打开而已，但外部链接的形式多样。变数太多，用JQ无法区别开来，但我们可以很容易区别内部链接，于是我们换下思路，“外部链接=除内部链接以外所有的链接”。在第一步的基础上我们只要排除了内部的链接就行了。但怎样排除呢。我们知道：HTML4.0增加了一个新属性：rel，这个属性用来说明链接和包含此链接页面的关系，以及链接打开的目标。我们可以给内部链接添天一个rel属性用来区分外部链接，然后用JQ的选择器排除内部链接。看下面的代码，我们在第三步的基础上修改下：

现在所有的内部链接都有rel=”inlinks”这个属性了。接着我们用JQ来排除内部链接在新窗口中打开，排除的方法是，如果链接的rel不具有inlinks这个属性的话，那么它就是一个外部链接，然后我们给这个外部链接添加一个click事件，点击后在新窗口中打开。

NOW…现在文章的内部链接会在自身窗口中打开，而外部链接会在新窗口中打开并且还有个标识符了。效果见我的BLOG；写完了？好像是？效果也实现了？其实还没完，效果是实现了，但还有一些特殊的情况没有考滤进来。比如文章中的图片链接，锚链接…OK，继续排除这两个链接。

第五步：排除图片和锚链接

这下是真的完了。看起来好像写了很多代码，很复杂。其实很简单。我们把它优化下，写在一起。最后的完整代码是这样的：

两行代码。对，就是这么简单。jQuery的选择器很强大…

您可能也喜欢：

巧妙设计你的链接[seo]

如何合理使用链接打开方式

一个显示友情链接RSS的WP插件

去掉链接时虚线框的几个方法

不刷新（AJAX）获取文章的内容

无觅

相关文章

• 2009-08-28 -- jQuery实现背景图渐变切换 (10)
  链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
• 2008-08-15 -- 去掉链接时虚线框的几个方法 (5)
  我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。 在这介绍几种去除的方法： 1.直接给链接加是onfocus="this.blur()". 链接 2.CSS实现 ...
• 2011-09-24 -- 使用lesscss来编码编写css (10)
  lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
• 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
  今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
• 2011-08-17 -- Flight主题更新 (16)
  这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...

说到链接问题，还值得一提的是链接设计师们都使用了相关的链接标签，给链接一致添加了暗示“可点击”的标识，并用颜色把“已点击”和“未点击”的链接区分开来。

1. 使用相关的链接描述

应不惜一切代价避免用户的困惑！也就是说，要保证用户能够认出每一个链接，能够在某种程度上预测目的页的内容，或者说他们即将访问的网站的内容。会让用户困惑的一个经典实例就是使用“点击此处”的标签，这并没有提供任何与链接目的页相关的信息，因此会让人十分疑惑。

另一个例子就是嵌入式链接—一旦使用了这类链接，链接文本就应该准确指出链接的去向。一般来说，用户都倾向于忽略文本中的嵌入式链接，因此，我建议你最好不要使用。

2. 要知道链接都有一定的特征：像下划线和特殊的颜色

实际上，第二个特征远远没有第一个重要，但在某些特殊的情况下，下划线还是可以去除的，尤其是当某些区域绝对明显时—访问者一看就知道是链接；例如，当鼠标放在超链接上时，光标会变成手的形状。建立链接时，你应该为用户提供足够明显的标识，让他们知道此处是“可点击”的链接。与此同时，还值得我们铭记于心的是，一个网页的不同区域链接出现的概率也有所不同；举例来说，网页中间、左边及右边的标题成为链接的可能性会大些。

3.用不同的颜色区分已访问和未访问的链接

文本链接一定要和页面的其他文字有所区分，避免在链接处使用特殊的色彩，我们应该使用标准、醒目的颜色—总之，链接应该尽可能从电脑屏幕中突现出来。还值得注意的是，已点击的链接也必须以某种方式与未点击的链接区别开来，其中最好的方法就是采用不同的颜色。

与尚未被点击的链接刚好相反，点击过的链接应该采用比较朦胧的、淡的色彩，像灰色或栗色。使用两种不同的颜色，但如果他们的色彩强度一致，也可能会带来不好的效果，因为这样用户也很难区别已访问和未访问的链接。我们可以考虑使用其他颜色替代，像蓝色就是最经典的链接色。

4.避免其它文字使用颜色

在我看来，颜色应该仅仅用于超链接上。不过一些特殊的词语也可以使用普遍的公认的色彩，像红色代表错误或警告，绿色代表通过或成功。从技术上讲，涉及到文件的色彩时， 你最好在属性设置中分别指定所有的颜色（像bgcolor,text,link,vlink,alink）,以确保网站各部分的易读性。

强调这一点主要是因为许多用户会设置某种颜色为默认，所以如果你不指明文件的所有颜色，他们最终会变为很难辨认的文件。而且，就算你使用了图片作背景，但仍然应该指明文件的bgcolor（背景色），不能掉以轻心，因为用户很可能没有载入图片。

5. 光标指向超链接时，别乱用“特殊效果”

我们之前已经说过，下划线文本是超链接最明显的标识，但在一些特殊的情况可以除去超链接的下划线，且不影响它的效果及可用性。例如，只有当用户指向某一链接时，我们才显示此处是可点击的—或者说，只有当鼠标放在链接上时，才会出现下划线，标志着是“可点击”的。

不过我并不建议你使用“粗体”的效果，因为这样可能使得整个文本都重新编制。相反的，其他像链接标题的效果在创建有用的网站时（网站导航的可用性）会显得特别成功，不过最近用户们还是发现了许多问题，他们发现大多数情况下自己根本就不知道将要点击的链接的去向。为了满足用户的需求，许多浏览器都扩展了一项功能，它们能略微预览链接到的地址。这一扩展在很大程度上减少了用户的疑惑。

6. 链接不能太过密集

要保证互联网用户是自愿到达到目的页的，而不是因为由于链接太过密集，使得用户在点击其他链接时误点到这些链接。不过这点不是很重要，我们大可跳过不讲，我想网友们也不会很感兴趣；但我们还是要给予一定的重视和适当的考虑，将每一网页上的链接数量限制在合理的范围内(少于100)，以防访问者总是误入其他页面。

7. 确保重要的网页内容可通过多个路径进行访问

设置多个路径访问同一信息，能帮助用户快速找到他们想要的信息。不同的用户会以不同的方式查询，这完全取决于用户各自的爱好偏向、及他们网站上不同的网页布局。

8.使用文字链接而不是图象链接

如我们之前所说的，文本链接能给人一种“可点击”的感觉。文本链接通常都有很快的下载速度，是用户偏爱的链接；要注意的是，链接被选中后，颜色也应发生相应的改变。

即使从技术的角度来看，也是很有道理的，在链接的目的地设置文本要比使用图象简单的多。如果是图象链接，用户会表现的相当困惑，他们通常都不能确定眼前的图片是否是可点击的，或者是否会链接到某些恶意网站，让人似乎没有了安全感。因此，链接的链接按钮，不要用图片，要用文字！

9. 合理的链接长度

超链接要足够长才能被用户理解，但也不能过长，一般都不能超过50个字符。

10. 试着提醒访问者，以防他们退出页面

当访问者在不知情的情况下可能将要退出页面并转向其它网站时，你最好能事先提醒他。一般来说，用户都期望即将访问的新页面与当前浏览的网页是出自同一网站，如果最终出现的是另一种情况，他们会觉的无所适从。因此，我最后要说的是，在创建网站时可以考虑设置提示信息，当访问者要离开网站时，提醒他们是否真的要退出网站。

11. 在网站上提供有用信息的链接

如果你使用超链接进一步定义、解释或说明网页内容，能改善你网站的导航系统。这些链接能补充说明某些概念，对缺少经验的用户会有很大帮助！

12.保留的字符引发的问题

这也是技术问题：为了可以用作网址，保留的字符是需要以十六进制格式编码的。部分浏览器可以正确显示这些字符，但这并不意味着使用这些字符时完全不需要设置浏览器的编码。

举例来说，空格就是特殊的字符，需要进行编码；不过我劝你最好不要使用需要编码的字符。此外，还有一个问题，URL字母的大小写敏感性（case sensitivity）也可能会给你造成不必要的麻烦，我建议你在开始设计数据库时就考虑大小写敏感性，防止它们在你从某一服务器转向另一服务器时发生改变。

13.导航系统的规范建设

切记，在某一区域中将相关的链接集合到一起是至关重要的。在屏幕读者用户浏览网页时，似乎人人都期望网站主要的导航菜单能显示在网页内容之前，出现在网页最主要的位置。几乎没有用户会更希望先看到网页内容，不过把网页内容放置在像广告、友情链接及页脚这类不相关的信息之前，还是很可取的。

您可能也喜欢：

如何合理使用链接打开方式

去掉链接时虚线框的几个方法

一个显示友情链接RSS的WP插件

增强用户体验之文章内的链接

浅议Web网页Form表单设计技巧

无觅

相关文章

• 2009-08-28 -- jQuery实现背景图渐变切换 (10)
  链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
• 2009-06-04 -- 如何合理使用链接打开方式 (4)
  一．链接打开方式 1. 新窗口打开 优点：用户点链接的时候，当前浏览的内容不会被替换，不需要通过前进、后退去看自己看过的内容； 缺点：访问一会，就会产生大量窗口，占用资源。每个窗口都需要手动...
• 2008-11-20 -- 增强用户体验之文章内的链接 (29)
  我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...