为购物网站设计首页交互行为

24.4　设计首页交互行为

开始编写jQuery代码之前，首先要确定应该完成哪些功能。在网站首页（index.html）上将完成如下功能：

　搜索框文字效果。

　网页换肤。

　导航效果。

　左侧商品分类热销效果。

　中间大屏广告效果。

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

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

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

下面将针对上述效果分别进行详细说明。

24.4.1　搜索框文字效果

搜索框默认会有提示文字，如“请输入商品名称”，当光标定位在搜索框中时，需要将提示文字删除，当光标移开时，如果用户未填写任何内容，需要把提示文字恢复，同时添加回车提交的效果。

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

24.4.2　网页换肤

网页换肤的设计原理就是通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤记入Cookie中，这样当用户下次访问时，就可以显示用户自定义的皮肤了。

【操作步骤】

第1步，首先设置HTML的结构，在网页中添加皮肤选择按钮（

• 标签）和基本内容，代码如下：

第2步，根据HTML代码预定义几套换肤用的样式表，分别有蓝色、紫色、红色等6套，默认是蓝色，这些样式表分别存储在styles/skin目录下。

第3步，为HTML代码添加样式。注意，在HTML文档中要使用标签定义一个带id的样式表链接，通过操作该链接的href属性的值，从而实现换肤。代码如下：

第4步，新建JavaScript文件，保存为changeSkin.js，输入以下代码，为皮肤选择按钮添加单击事件。

本例脚本需要完成的任务包含如下两个步骤：

　当皮肤选择按钮被单击后，当前皮肤就被勾选。

　将网页内容换肤。

第5步，前面为标签设置id，此时可以通过attr()方法为标签的href属性设置不同的值。

第6步，完成后，当单击皮肤选择按钮时，即可切换网页皮肤，但是当用户刷新网页或者关闭浏览器后，皮肤又会被初始化，因此需要将当前选择的皮肤进行保存。

第7步，本例需要引入jquery.cookie.js插件。该插件能简化Cookie的操作，此处就将其引入。代码如下：

第8步，保存后，即可通过Cookie来获取当前的皮肤。如果Cookie确实存在，则将当前皮肤设置为Cookie记录的值。

changeSkin.js文件的完整代码如下：

第9步，此时，网页换肤功能不仅能正常切换，而且也能保存到Cookie中。当用户刷新网页后，仍然是当前选择的皮肤，效果如图24.10所示。

图24.10　网页换肤按钮及其效果

24.4.3　导航效果

新建JavaScript文件，保存为nav.js，输入以下代码：

在上面的代码中，使用$("#nav li")选择id为nav的

• 元素，然后为它们添加hover事件。在hover事件的第1个函数内，使用$(this).find(".jnNav")找到
• 元素内部class为jnNav的元素。然后用show()方法使二级菜单显示出来。在第2个函数内，使用hide()方法使二级菜单隐藏起来。显示效果如图24.11所示。

图24.11　导航菜单交互效果

24.4.4　商品分类热销效果

为了完成这个效果，可以先用Dreamweaver查看模块的DOM结构，HTML代码如下：

在结构中，发现在热销效果的元素上包含一个promoted的类，通过这个类，JavaScript会自动完成热销效果。

新建JavaScript文件，保存为addhot.js，然后输入以下jQuery代码：

此时，热销效果如图24.12所示。

图24.12　热销效果

24.4.5　产品广告效果

在实现这个效果之前，先分析一下如何完成这个效果。在产品广告下方有5个缩略文字介绍，它们分别代表5张广告图，如图24.13所示。

图24.13　产品广告效果

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

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

在上面的代码中定义了一个showImg()函数，然后给函数传递了一个参数index，index代表当前要显示图片的索引。

获取当前滑过的元素在所有元素中的索引可以使用jQuery的index()方法。其中，.eq(0).mouseover()部分是用来初始化的，让第1个文字高亮并显示第1张图片。

读者也可以修改eq()方法中的数字来让页面默认显示任意一个广告。

24.4.6　超链接提示

本节设计主页右侧最新动态模块的内容添加超链接提示。在现代的浏览器中都自带了超链接提示，只需在超链接中加入title属性即可。HTML代码如下：

超链接

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

【操作步骤】

第1步，在页面上添加普通超链接，并定义class="tooltip"属性。HTML代码如下：

第2步，在CSS样式表中定义提示框的基本样式：

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

上面代码的设计思路如下：

当鼠标滑入超链接时，先创建一个

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

为了移除标签中自带的title提示功能，需要进行以下操作：

　当鼠标滑入时，给对象添加一个新属性myTitle，并把title的值传给这个属性，然后清空属性title的值。

　当鼠标滑出时，再把对象的myTitle属性的值赋给属性title。

为什么当鼠标移出时，要把属性值又传递给属性title呢？因为当鼠标滑出时，需要考虑再次滑入时的属性title值，如果不将myTitle的值传递给title属性，当再次滑入时，title属性值就为空。

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

为了让提示信息能够跟随鼠标移动，还需要为超链接添加一个mousemove事件，在该事件函数中不断更新提示信息框的坐标位置，实现提示框能够跟随鼠标移动。

第4步，在浏览器中预览，则可以看到如图24.14所示的提示信息框效果。

图24.14　提示信息框效果

24.4.7　品牌活动横向滚动效果