Question

8.6.1　准备工作

开始编写jQuery代码之前，先确定应该完成哪些功能。

在网站首页（index.html）上将完成如下功能。

　搜索框文字效果。

　网页换肤。

　导航效果。

　左侧商品分类热销效果。

　中间大屏广告效果。

　右侧最新动态模块内容添加超链接提示。

　右侧下部品牌活动横向滚动效果。

　右侧下部鼠标滑过产品列表效果。

在详细页（detail.html）上将完成如下功能。

　产品图片放大镜效果。

　产品图片遮罩层效果。

　单击产品小图片切换大图。

　产品属性介绍之类的选项卡。

　右侧产品颜色切换。

　右侧产品尺寸切换。

　右侧产品数量和价格联动。

　右侧给产品评分的效果。

　右侧放入购物车。

接下来就用jQuery逐步地完成这些效果。

注意：为了使js文件代码更加清晰，每个页面上引用了很多js文件，实际开发过程中，可以合并成一个js文件。

8.6.2　首页（index.html）上的功能

1．搜索框文字效果（input.js）

搜索框默认会有提示文字，如请输入商品名称，当光标定位在搜索框上时，需要将提示文字去掉，当光标移开时，如果用户未填写任何内容，需要把提示文字恢复。在第3章已经实现过类似的效果，不过我们还需要在此基础上添加回车提交的效果，jQuery代码如下：

2．网页换肤（changeSkin.js）

该效果在第5章已经介绍过，需要引入jquery.cookie.js插件，然后将第5章的切换皮肤的jQuery代码引入，最后修改样式路径即可，代码如下：

将以上代码放到一个名为changeSkinjs的文件里，然后在index.html页面中引用，代码如下：

引入后，就可以为网站切换皮肤了。例如把网站皮肤切换为红色，并且在关闭浏览器后，再次打开网站时，皮肤依旧是刚才所选择的样式，即红色，如图8-10所示。

图8-10　切换皮肤成功

3．导航效果（nav.js）

jQuery代码如下：

在上面代码中，使用$("#nav li")来选择id为nav里面的<li>元素，然后为它们添加hover事件。在hover事件的第1个函数内，使用$(this).find(".jnNav")找到<li>元素内部class为jnNav的元素，然后用show()方法使二级菜单显示出来。在第2个函数内，用hide()方法使二级菜单隐藏起来。显示效果如图8-11所示。

图8-11　导航效果

4．左侧商品分类热销效果（addhot.js）

为了完成这个效果，可以先用Firebug工具查看模块的DOM结构，如图8-12所示。

图8-12　模块的DOM结构

在结构中，发现需要添加热销效果的元素上会包含一个promoted的类，通过这个钩子，我们就能完成热销效果了，jQuery代码如下：

此时，热销效果如图8-13所示。

5．右侧上部产品广告效果（ad.js）

在实现这个效果之前，先分析下如何来完成这个效果。

在产品广告下方有5个缩略文字介绍，它们分别代表5张广告图，如图8-14所示。

图8-13　热销效果

图8-14　广告效果图

当光标滑过文字1时，需要显示第1张图片；当光标滑过文字2时，需要显示第2张图片；依此类推。因此，如果能正确获取到当前滑过的文字的索引值，那么完成该效果就非常简单了。完成这个效果的大概结构代码如下：

在上面代码中，定义了一个showImg()函数，然后给函数传递了一个参数index，index代表当前要显示图片的索引。获取当前滑过的<a>元素在所有<a>元素中的索引可以使用jQuery的index()方法来获取。其中.eq(0).mouseover()部分是用来初始化的，让第1个文字高亮并显示第1个图片。你也可以修改eq()方法中的数字来让页面默认显示任意一个广告。代码如下：

接下来完成showImg()函数，showImg()函数代码如下：

在上段代码中，首先用获取当前滑过的链接的href值，然后将值设置给大图外面的超链接。接下来，我们获取所有的大图，然后根据传入的参数index来显示相应的图片，并且将相邻的图片隐藏起来。你可以使用show()或者hide()完成这个效果，但为了让图片能够更加平滑的过渡，我们使用了fadeIn()和fadeOut()的动画效果。在使用这些效果之前，使用stop(true,true)方法将未执行完的动画队列清空，同时将正在执行的动画跳转到末状态。最后使用addClass("chos").和removeClass("chos")来给当前的文字添加高亮样式，同时为其设置不透明度。

现在，当光标在广告下方的文字上滑过时，广告就会有平滑过渡切换的效果。但如果不去碰它，那么广告始终不会动。因此接下来需要为广告添加自动执行效果。代码如下所示：

在setInterval()方法的第1个参数中，需要实现以下功能。

　调用showImg（index）来显示广告效果。

　每调用一次，给index加1。

　如果index的大小已经等于广告展示的总数量，那么把index设置为0，让广告效果又重新开始。

根据以上分析，可以写出如下代码：

此时，广告还是不会自动切换，因为我们并没有在用户进入页面时，触发hover方法。前面介绍过，hover()方法的含义是鼠标滑入滑出，它对应着2个事件，即mouseenter和mouseleave。因此可以通过trigger("mouseleave")函数来触发hover事件的第2个函数。最终完整的代码如下：

运行代码后，当光标滑入广告文字时，会显示不同的广告图片；当光标不碰它时，广告也会自动滚动切换。

6．右侧最新动态模块内容添加超链接提示（tooltip.js）

该效果在第3章的最后一个例子中已经介绍过，只需要将相应的内容引入即可。

先引入相应的CSS样式，代码如下：

然后为超链接元素添加class="tooltip"和title属性，代码如下：

最后引入jQuery代码，代码如下：

运行代码后，最新动态模块内的超链接元素已经有了自制的提示效果，效果如图8-15所示。

图8-15　提示效果

7．右侧下部品牌活动横向滚动效果（imgSlide.js）

在第4章的案例中，已经对类似效果进行了介绍，因此并不需要花太多功夫就可以写出如下代码：

当单击品牌活动右上角的分类链接时，产品就会以横向滚动的方式显示相应内容。

8．右侧下部光标滑过产品列表效果（imgHover.js）

如果还想为产品列表添加光标滑过的效果，其效果如图8-16所示。

图8-16　光标滑过图片的效果

为了完成这个效果，可以为产品列表中的每个产品都创建一个<span>元素，它们的高度和宽度都与产品图片相同，然后为它们设置定位方式、上边距和左边距，使之刚好处于图片上方，代码如下：

接下来的工作就是通过控制class来达到显示光标滑过的效果。首先在CSS中添加一组样式，代码如下：

当光标滑入class为imageMask的元素时，为它添加imageOver样式来使产品图片出现放大镜效果；当光标滑出元素时，移除imageOver样式。代码如下：

此时，当光标滑入图片上时，就可以出现放大镜了。

注意，这里使用的是live()方法绑定事件，而不是使用bind()方法。由于imageMask元素是被页面加载完后动态创建的，如果用普通的方式绑定事件，那么不会生效。而live()方法有个特性就是即使是后面创建的元素，用它绑定的事件一直会生效。

另外，也可以使用delegate()方法，通过这种事件委派的方式，也能达到预期的效果，jQuery代码如下：

至此，首页（index.html）的交互功能就完成了。

8.6.3　详细页（detail.html）上的功能

1．产品图片放大镜效果（jquery.zoom.js + use_jqzoom.js）

首先来看一下最终要实现的效果，如图8-17所示。

如果要亲自动手实现这个效果，或许不是件容易的事情。不过，可以借助于插件，插件也是jQuery的特色之一。因此可以去官方网站查找一下，看是否有类似的插件。在本例中，使用的是名为jqzoom的插件，它很适合此时的需求。

图8-17　产品图片放大镜效果

首先把它引入到网页中，代码如下：

查看官方网站的API使用说明，可以使用如下代码调用jqzoom：

将上面的代码放入名为usejqzoom.js的文件里，然后引入。

接下来在相应的HTML代码中添加属性，为<a>元素添加href属性，它的值指向产品对应的放大图，同时为它自定义的rel属性，它是小图片切换为大图片的钩子，后面将会讲解它。代码如下：

最后不要忘记添加jqzoom所提供的样式。

此时，运行代码后，产品图片的放大效果就显示出来了。

2．产品图片遮罩层效果(jquery.thickbox.js)

当单击观看清晰图片按钮时，需要显示图8-18所示的遮罩效果。

同样，在官方网站也有一款非常适合的插件，名为thickbox。按照官方网站的API说明，引入相应的jQuery和CSS文件，代码如下：

图8-18　产品遮罩效果

然后为需要应用该效果的超链接元素添加class="thickbox"和title属性，它的href值代表着需要弹出的图片。代码如下：

此时，当单击观看清晰图片按钮时，就能出现遮罩层效果了。

在上面的两个效果中，并没有花太多的时间就做出来了，可见，合理地利用成熟的jQuery插件能极大的提高开发效率。

3．单击产品小图片切换大图（switchlmg.js）

当单击产品小图片时，上面对应的大图片需要切换，并且大图片的放大镜效果和遮罩效果也必须同时切换。

首先来实现第一个效果：单击小图切换大图。

在前面的jqzoom的例子中，我们自定义了一个rel属性，它的值是gal1，它是小图切换大图的钩子，HTML代码如下：

在上面代码中，我们为超链接元素定义了rel属性，它的值又定义了3个属性，分别是gallery、smallimage和largeimage，作用就是点击小图时，首先通过gallery来找到相应的元素，然后为元素设置smallimage和largeimage。

此时，点击小图可以切换大图，但单击观看清晰图片弹出的大图并未更新。接下来就来实现这个效果。

实现这个效果并不难，但为了使程序更加简单，需要为图片使用基于某种规则的命名。例如为小图片命名为blue_one_small.jpg，为大图片命名为blue_one_big.jpg，这样就可以很容易地根据单击的图片（blue_one.jpg）来获取相应的大图片和小图片。代码如下：

通过lastIndexOf()方法，获取到图片文件名中最后一个.的位置，然后在substring()方法中使用该位置来分割文件名，得到blue_one和.jpg两部分，最后通过拼接_big来得到相应的大图片，将它们赋给id为thickImg的元素。

应用代码后，当单击产品小图片时，不仅图片能正常切换，而且它们所对应的放大镜效果和遮罩层效果都能正常显示出当前显示的产品的图片。

4．产品属性介绍之类的选项卡（tab.js）

在第5章中已经做过一个选项卡的例子，因此可以把代码不加修改而直接使用，代码如下：

5．右侧产品颜色切换（switchColor.js）

与单击左侧产品小图片切换为大图片类似，不过还需要多做几步，即显示当前所选中的颜色和显示相应产品列表。代码如下：

运行效果后，产品颜色可以正常切换了，但发现一个问题，如果不手动去单击缩略图，那么放大镜效果显示的图片还是原来的图片。解决方法很简单，只要触发获取的元素的单击事件即可：

6．右侧产品尺寸切换（sizeAndprice.js）

在实现该功能之前，先看一下它的DOM结构，在Firebug工具中显示如图8-19所示的效果。

图8-19　产品尺寸的DOM结构

通过观察产品尺寸的DOM结构，可以非常清晰地知道元素之间的各种关系，然后利用jQuery强大的DOM操作功能，可以写出如下代码：

这样，用户就可以通过单击尺寸来进行实时产品尺寸的选择。

7．右侧产品数量和价格联动（sizeAndprice.js）

该功能非常简单，只要能正确获取单价和数量，然后取它们的积，最后把积赋值给相应的元素即可。需要注意的是，为了防止表单元素刷新后依旧保持原来的值而引起的价格没有联动问题，需要在页面刚加载时，为元素绑定change事件之后立即触发change事件。代码如下：

8．右侧给产品评分的效果（star.js）

在开始实现该效果之前，先看一下静态的HTML效果，如果使用如下HTML代码：

那么会显示图8-20所示的效果。

图8-20　样式为nostar时的效果

如果使用如下HTML代码：

图8-21　样式为onestar时的效果

那么会显示图8-21所示的效果。

由此可以看出，通过改变<ul>元素的class属性，就能实现评分效果了。

根据这个原理，可以写出如下代码：

这样，当用户单击不同的五角星图片时，就可以动态的进行评分了。

9．右侧放入购物车（finish.js）

这一步只需要将用户选择产品的名称、尺寸、颜色、数量和总价告诉用户，以便用户进行确认是否选择正确，代码如下：

当出现图8-22所示的效果时，那么网站所需的所有效果都已经完成了。

图8-22　alert()方式

如果你觉得以alert()方式去显示内容不太合适的话，那么可以使用第7章的学习的SimpleModal插件来显示内容。最终购买效果图如图8-23所示

图8-23 SimpleModal方式

现在，可以放心地将这个购物网站交给后台程序员去处理了。该购物网站已经具备了一个很时尚的形象。在制作网站的过程中使用合法且语义清晰的XHTML文档来表示网站的结构内容，还用到一些外部CSS样式表为这个网站实现了特色的视觉效果。最后，利用jQuery所提供的强大功能改善了网站的行为和可用性，使用户更容易接受这个网站。