3.3 案例研究—某网站的超链接和图片提示效果

在这一节中，将以某网站的超链接和图片提示效果为例，来理解和巩固jQuery中的DOM操作。

1．超链接提示效果

在现代的浏览器中，它们已经自带了超链接提示，只需在超链接中加入 title 属性就可以了。HTML代码如下：

[插图]

然而这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除<a>标签中的title提示效果，自己动手做一个类似功能的提示。

[插图]

图3-37 超链接提示效果

首先在空白的页面上，添加两个普通超链接和两个带有class的超链接。

HTML代码如下：

[插图]

然后为class为tooltip的超链接添加mouseover和mouseout事件，jQuery代码如下：

[插图]

实现这个效果的具体思路如下。
（1）当鼠标滑入超链接。
① 创建一个<div>元素，<div>元素的内容为title属性的值。
② 将创建的元素追加到文档中。
③ 为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。

（2）当鼠标滑出超链接时，移除<div>元素。
根据分析的思路，写出如下jQuery代码：

[插图]

运行效果，如图3-38所示。

此时的效果有两个问题：首先是当鼠标滑过后，<a>标签中的title属性的提示也会出现；其次是设置x坐标和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示的问题（鼠标焦点变化引起mouseout事件）。

[插图]

图3-38 超链接提示

为了移除<a>标签中自带的title提示功能，需要进行以下几个步骤。

（1）当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值。
jQuery代码如下：

[插图]

（2）当鼠标滑出时，再把对象的myTitle属性的值又赋给属性title。
jQuery代码如下：

[插图]

注意：为什么当鼠标滑出时，要把属性值又赋给属性title呢？因为当鼠标滑出时，需要考虑再次滑入时的属性title值，如果不将myTitle的值重新赋给title属性，当再次滑入时，title的值就为空了。

为了解决第2个问题（自制的提示与鼠标的距离太近，有时候会引起无法提示的问题），需要重新设置提示元素的top和left的值，代码如下所示，为top增加了10px，为left增加了20px。

[插图]

解决这两个问题后，完整的代码如下：

[插图]

此时，鼠标滑入和滑出显示已经没问题了，但当鼠标在超链接上移动时，提示效果并不会跟着鼠标移动。如果需要提示效果跟随鼠标一起移动，可以为超链接加上一个mousemove事件，jQuery代码如下：

[插图]

图3-39 提示效果

[插图]

这样，当鼠标在超链接上移动时，提示效果也会跟着一起移动了。

到此，超链接提示效果就完成了，完整的jQuery代码如下：

[插图]

2．图片提示效果

稍微修改上面的代码，就可以做出一个图片的提示效果。

首先在空白网页中加入图片，HTML代码如下：

[插图]

设置样式后，初始化效果如图3-40所示。

[插图]

图3-40 初始化效果

参考前面的超链接提示效果的代码，只需要将创建的<div>元素的代码由

[插图]

改为

[插图]

就可以了。当鼠标滑过图片后，显示效果如图3-41所示。

[插图]

图3-41 图片提示效果

为了使效果更为人性化，还需要为图片增加说明文字，即提示出来的大图片下面出现图片相应的介绍文字。

可以根据超链接的title属性值来获得图片相应的介绍文字，jQuery代码如下：

[插图]

然后将它追加到<div>元素中，代码如下：

[插图]

注意：在判断this.myTitle是否为" "时，使用了三元运算。三元运算结构为：Boolean？值1 : 值2。它的第1个参数必须为布尔值。当然三元运算也可以用“if(){ }else{ }”代替，例如： [插图]

这样，图片提示效果就完成了，当鼠标滑过图片时，图片会出现预览的大图，大图下面还会有介绍文字。效果如图3-42所示。

[插图]

图3-42 图片提示效果

完整的jQuery代码如下：

[插图]

到此，超链接提示和图片提示效果就都完成了。此处仅仅用了 jQuery 中的几个DOM 操作方法，就完成了很友好的动态提示效果。