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

本节设计右侧下部品牌活动横向滚动效果。

设计思路：先定义动画函数showBrandList()，该函数根据下标index决定滚动距离。然后为每个Tab标题链接绑定click事件，在该事件中调用showBrandList()实现横向滚动效果。

新建JavaScript文档，保存为imgSlide.js，然后输入以下代码：

在网页中应用该动画效果，当单击品牌活动右上角的分类链接时就会以横向滚动的方式显示相关内容，效果如图24.15所示。

图24.15　横向滚动效果

24.4.8　光标滑过产品列表效果

本节设计主页右侧下部光标滑过产品列表的动态效果。当光标滑过产品时会添加一个半透明的遮罩层并显示一个放大镜图标，效果如图24.16所示。

图24.16　光标滑过产品列表效果

为了完成这个效果，可以为产品列表中每个产品都创建一个元素，设计它们的高度和宽度与产品图片高度和宽度都相同，然后为它们设置定位方式、上边距和左边距，并使之位于图片上方。

【操作步骤】

第1步，新建JavaScript文档，保存为imgHover.js，输入以下代码：

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

第3步，当光标滑入class为imageMask的元素时，为它添加imageOver样式使产品图片出现放大镜效果，当光标滑出元素时，移除imageOver样式。

第4步，当光标滑入图片时，即可出现放大镜。注意，这里使用的是live()方法绑定事件，而不是使用bind()方法。由于imageMask元素是被页面加载完后动态创建的，如果用普通的方式绑定事件，那么不会生效。而live()方法有个特性，就是即使是后来创建的元素，用它绑定的事件一直会生效。

24.5　设计详细页交互行为

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

　产品图片放大镜效果。

　产品图片遮罩层效果。

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

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

　右侧产品颜色切换。

　右侧产品尺寸切换。

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

　右侧给产品评分的效果。

　右侧放入购物车。

下面就用jQuery逐步完成这些效果。

24.5.1　图片放大镜效果

当用户移动光标到产品图片上时，会放大产品局部区域，以方便用户查看产品细节。这种放大镜效果在网店中是常用特效，演示效果如图24.17所示。

图24.17　产品图片放大效果

如果亲自动手实现这个效果，或许比较麻烦，不过可以借助插件来快速实现。插件是jQuery的特色之一，访问jQuery官网查找一下，看是否有类似的插件，本例使用的是名为jqzoom的插件，它很适合本例设计需求。

【操作步骤】

第1步，在官网找到jquery.jqzoom.js，并下载到本地，然后在详细页中把它引入到网页中，代码如下：

第2步，新建JavaScript文件，保存为use_jqzoom.js。查看官方网站的API使用说明，可以使用如下代码调用jqzoom。

第3步，将上面代码放入use_jqzoom.js文件中，然后在网页文档中引入。

第4步，在相应的HTML代码中添加属性。为元素添加href属性，设置它的值指向产品对应的rel属性，它是小图片切换为大图片的“钩子”，代码如下。

第5步，不要忘记添加jqzoom所提供的样式。此时，运行代码后，产品图片的放大效果即可显示出来。

24.5.2　图片遮罩效果

下面设计产品图片的遮罩效果，当单击“观看清除图片”按钮时，需要显示如图24.18所示的大图，为此需要启动遮罩层，遮盖其他内容显示。

本效果也应用了jQuery插件，在官方网站搜索可以找到名为thickbox的插件，是一款非常适合的效果。

【操作步骤】

第1步，下载jquery.thickbox.js插件文件。

第2步，按照官方网站的API说明，引入相应的jQuery和CSS文件，代码如下：

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

图24.18　产品图片遮罩效果

第4步，此时，当单击“观看清晰图片”按钮时，就能够显示遮罩层效果。

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

24.5.3　小图切换大图

本效果设计当单击产品小图片时，上面对应的大图片会自动切换，并且大图片的放大镜效果和遮罩效果也能够同时切换。

【操作步骤】

第1步，先实现第一个效果：单击小图切换大图。在图片放大镜的jqroom的例子中，自定义一个rel属性，它的值是gal1，它是小图切换大图的“钩子”，HTML代码如下：

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

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

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

第3步，新建JavaScript文档，保存为switchImg.js，然后输入以下代码：

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

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

图24.19　小图切换大图效果