1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第1212章章 综合实战综合实战使用使用jQuery jQuery 实现携程网站特效实现携程网站特效 本章我们主要使用本章我们主要使用 jQuery 技术来实现携程网站上有代技术来实现携程网站上有代表性、通用性的特效，来深入讲解表性、通用性的特效，来深入讲解 jQuery 技术在实际项目技术在实际项目中的运用。中的运用。12.1 12.1 网站特效网站特效 携程网站是中国领先的一家旅游网站，在这家网站携程网站是中国领先的一家旅游网站，在这家网站上可以选择酒店、旅游、机票、火车、汽车、用车、门上可以选择酒店、旅游、机票、火车、汽车、用车、
2、门票等服务。该网站上有很多特效，我们选取一些常用的、票等服务。该网站上有很多特效，我们选取一些常用的、有代表性的特效，比如注册表单校验、有代表性的特效，比如注册表单校验、60s 倒计时、登倒计时、登录两种方式切换选择、导航菜单、海报轮播、菜单悬浮、录两种方式切换选择、导航菜单、海报轮播、菜单悬浮、图片放大等，介绍使用图片放大等，介绍使用 jQuery 来实现这些通用功能的来实现这些通用功能的方法，以加深读者对使用方法，以加深读者对使用 jQuery 的理解。的理解。12.2 12.2 特效需求特效需求12.2.1 12.2.1 网站注册表单布局设计网站注册表单布局设计 需求：携程网站用户注册表
3、单填写部分需要对填写需求：携程网站用户注册表单填写部分需要对填写的表单项进行校验，如图的表单项进行校验，如图 12-1 12-1 所示。所示。图图 12-1 网站注册网站注册12.2.2 12.2.2 倒计时交互设计倒计时交互设计 需求：倒计时交互设计是使用非常频繁的一个交互需求：倒计时交互设计是使用非常频繁的一个交互设计，获取手机验证码或者邮箱验证码时都会用到这个设计，获取手机验证码或者邮箱验证码时都会用到这个交互，如图交互，如图 12-2 12-2 所示。所示。图图 12-2 倒计时交互倒计时交互12.2.3 12.2.3 网站登录布局与交互设计网站登录布局与交互设计 需求：网站登录提供两
4、种登录方式，一种是手机登需求：网站登录提供两种登录方式，一种是手机登录，另一种是手机动态密码登录，实现两种登录方式的录，另一种是手机动态密码登录，实现两种登录方式的切换效果，如图切换效果，如图 12-3 12-3、图、图 12-4 12-4 所示。所示。图图 12-3 普通登录普通登录 图图 12-4 手机动态密码登录手机动态密码登录12.2.4 12.2.4 导航菜单设计导航菜单设计 需求：实现导航一级菜单和二级菜单联动效果，如需求：实现导航一级菜单和二级菜单联动效果，如图图 12-5 12-5 所示。所示。图图 12-5 导航菜单导航菜单12.2.5 12.2.5 海报轮播效果设计海报轮播
5、效果设计 需求：在携程网站首页里，会采用海报轮播效果展需求：在携程网站首页里，会采用海报轮播效果展现广告信息，可以在有限的区域内展示不同的广告信息，现广告信息，可以在有限的区域内展示不同的广告信息，这也是海报轮播的特色，如图这也是海报轮播的特色，如图 12-6 12-6 所示。所示。图图 12-6 轮播效果轮播效果12.2.6 12.2.6 页签切换效果设计页签切换效果设计 需求：在携程网站的搜索区域里可以对国内酒店、需求：在携程网站的搜索区域里可以对国内酒店、海外酒店、酒店团购等进行搜索，实现这些页签的切换海外酒店、酒店团购等进行搜索，实现这些页签的切换效果，如图效果，如图 12-7 12-
6、7、图、图 12-8 12-8 所示。所示。图图 12-7 选中国内酒店选中国内酒店图图 12-8 选中海外酒店选中海外酒店12.2.7 12.2.7 左右滑动效果设计左右滑动效果设计 需求：航空公司特惠专区可以实现航空信息左右滑需求：航空公司特惠专区可以实现航空信息左右滑动，如图动，如图 12-9 12-9、图、图 12-10 12-10 所示。所示。图图 12-9 滑动滑动 1图图 12-10 滑动滑动 212.2.8 12.2.8 手风琴效果设计手风琴效果设计 需求：纵向菜单可以实现手风琴效果，这也是很多需求：纵向菜单可以实现手风琴效果，这也是很多网站经常会采用的一种设计方式，如图网站经
7、常会采用的一种设计方式，如图 12-11 12-11 所示。所示。图图 12-11 手风琴菜单手风琴菜单12.2.9 12.2.9 图片放大缩小效果制作图片放大缩小效果制作 需求：在携程网站首页里，有很多旅游广告图片或需求：在携程网站首页里，有很多旅游广告图片或者酒店广告图片，当鼠标指针移入这些图片的时候，这者酒店广告图片，当鼠标指针移入这些图片的时候，这些图片会放大，移出的时候图片又会缩小。现在很多的些图片会放大，移出的时候图片又会缩小。现在很多的电商网站也是采用这样的方式来给商品图片添加交互效电商网站也是采用这样的方式来给商品图片添加交互效果，通过放大缩小交互动作使图片动起来，如图果，通过
8、放大缩小交互动作使图片动起来，如图 12-12 12-12 所示。所示。图图 12-12 特卖汇图片特卖汇图片12.3 12.3 关键知识点关键知识点 本章主要使用了本章主要使用了 jQuery jQuery 技术，下面我们就对本章技术，下面我们就对本章中用到的这几种关键技术点进行简单介绍。中用到的这几种关键技术点进行简单介绍。（1 1）控制页面元素显示与隐藏）控制页面元素显示与隐藏$(#div1).show();$(#div1).show();$(#div1).hide();$(#div1).hide();（2 2）页面元素添加样式）页面元素添加样式phone.css(borderColor
9、,#67a1e2);phone.css(borderColor,#67a1e2);（3 3）页面显示文本内容）页面显示文本内容prompt1.text(prompt1.text(手机号格式不正确手机号格式不正确););（4 4）输入框光标聚焦事件）输入框光标聚焦事件phone.focus(function()phone.focus(function()（5 5）输入框光标离开事件）输入框光标离开事件pwd.blur(function()pwd.blur(function()（6 6）设置定时任务）设置定时任务setTimeout(function()settime(obj),1000)setT
10、imeout(function()settime(obj),1000)（7 7）元素查找）元素查找 eq eq 相等事件相等事件$(.tab-boxdiv).eq(_index).show().siblings().hide();$(.tab-boxdiv).eq(_index).show().siblings().hide();$(#login1-2$(#login1-2 label).eq(_index).addClass(ons).siblings().removeCllabel).eq(_index).addClass(ons).siblings().removeClass(ons);
11、ass(ons);（8 8）mouseover mouseover 鼠标指针悬浮事件鼠标指针悬浮事件$(.xc_d1_1_1 li).mouseover(function()$(.xc_d1_1_1 li).mouseover(function()var _index=$(this).index();var _index=$(this).index();$(.tab-boxdiv).eq(_index).show().siblings().hide();$(.tab-boxdiv).eq(_index).show().siblings().hide();););（9 9）元素添加样式和移出样式
12、）元素添加样式和移出样式$(this).addClass(l_hover);/$(this).addClass(l_hover);/指向指向lili添加样式添加样式$(this).removeClass(l_hover);/$(this).removeClass(l_hover);/指向指向lili删除样式删除样式 （1010）元素点击事件）元素点击事件$li.click(function();$li.click(function();12.4 12.4 模块设计实现模块设计实现12.4.1 12.4.1 网站注册表单布局设计网站注册表单布局设计 模块设计实现携程旅游网站的注册表单是一个向导型
13、模块设计实现携程旅游网站的注册表单是一个向导型表单，注册分为表单，注册分为 3 3 个步骤：填写、验证、注册成功。注册个步骤：填写、验证、注册成功。注册表单内容包含手机号、表单内容包含手机号、EmailEmail、密码、确认密码等表单项，、密码、确认密码等表单项，提交表单时要进行表单验证，如图提交表单时要进行表单验证，如图 12-13 12-13、图图 12-14 12-14 所所示。示。图图 12-13 表单布局设计表单布局设计 实例运行效果如图实例运行效果如图 12-15 12-15 所示。所示。图图 12-15 表单布局设计与校验表单布局设计与校验12.4.2 12.4.2 倒计时交互设
14、计倒计时交互设计 在携程旅游网站填写完注册表单后，会进行验证，在携程旅游网站填写完注册表单后，会进行验证，有两种验证方式，一种是手机号验证，另一种是邮箱验有两种验证方式，一种是手机号验证，另一种是邮箱验证。如果没有填写手机号会进入邮箱验证页面进行验证，证。如果没有填写手机号会进入邮箱验证页面进行验证，邮箱验证时会有倒计时交互效果，如果在规定时间内没邮箱验证时会有倒计时交互效果，如果在规定时间内没有输入验证码，可以重新获取验证码，如图有输入验证码，可以重新获取验证码，如图 12-16 12-16 所所示。示。图图 12-16 倒计时交互设计倒计时交互设计 实例运行效果如图实例运行效果如图 12-
15、17 12-17 所示。所示。图图 12-17 倒计时交互设计效果倒计时交互设计效果12.4.3 12.4.3 网站登录布局与交互设计网站登录布局与交互设计携程旅游网站提供了两种登录方式，一种是普通登录，携程旅游网站提供了两种登录方式，一种是普通登录，另一种是手机动态密码登录，两种登录方式通过两种不另一种是手机动态密码登录，两种登录方式通过两种不同的按钮控制不同登录表单的显示，如图同的按钮控制不同登录表单的显示，如图 12-18 12-18、图、图 12-19 12-19 所示。所示。图图 12-18 普通登录普通登录 图图 12-19 手机动态密码登录手机动态密码登录 实例运行效果如图实例运
16、行效果如图 12-20 12-20 所示。所示。图图 12-20 网站登录布局与交互网站登录布局与交互12.4.4 12.4.4 导航菜单设计导航菜单设计 携程旅游网站导航菜单有很多内容，一级导航菜单携程旅游网站导航菜单有很多内容，一级导航菜单有首页、酒店、旅游、机票、火车、汽车票等，每个一有首页、酒店、旅游、机票、火车、汽车票等，每个一级导航菜单下面有对应的二级导航菜单，比如一级菜单级导航菜单下面有对应的二级导航菜单，比如一级菜单酒店下面对应的二级菜单有国内酒店、海外酒店、团购酒店下面对应的二级菜单有国内酒店、海外酒店、团购等，如图等，如图 12-21 12-21 所示。所示。图图 12-2
17、1 导航菜单导航菜单 实例运行效果如图实例运行效果如图 12-22 12-22 所示。所示。图图 12-22 导航菜单导航菜单12.4.5 12.4.5 海报轮播效果制作海报轮播效果制作 在网站首页中，我们制作海报轮播的效果来展现广在网站首页中，我们制作海报轮播的效果来展现广告信息，如图告信息，如图 12-23 12-23 所示。所示。图图 12-23 海报轮播区域海报轮播区域 实例运行效果如图实例运行效果如图 12-24 12-24 所示。所示。图图 12-24 海报轮播效果海报轮播效果12.4.6 12.4.6 页签切换效果设计页签切换效果设计 在携程网站搜索区域里可以对国内酒店、海外酒店
18、、在携程网站搜索区域里可以对国内酒店、海外酒店、酒店团购等进行搜索，如图酒店团购等进行搜索，如图 12-25 12-25 所示。所示。图图 12-25 国内酒店选中国内酒店选中 实例运行效果如图实例运行效果如图 12-26 12-26 所示。所示。图图 12-26 页签切换效果页签切换效果12.4.7 12.4.7 左右滑动切换效果设计左右滑动切换效果设计 携程网站里有用来展示航空公司特惠的专区内容，携程网站里有用来展示航空公司特惠的专区内容，由于特价航空有很多，在一个区域里无法显示所有内容，由于特价航空有很多，在一个区域里无法显示所有内容，这时可以采用左右滑动切换效果来动态展示特价航空信这时
19、可以采用左右滑动切换效果来动态展示特价航空信息，如图息，如图 12-27 12-27、图、图 12-28 12-28 所示。所示。图图 12-27 特价航空特价航空 1图图 12-28 特价航空特价航空 2 实例运行效果如图实例运行效果如图 12-29 12-29 所示。所示。图图 12-29 特价航空左右滑动特价航空左右滑动12.4.8 12.4.8 手风琴效果菜单设计手风琴效果菜单设计 手风琴效果菜单是很多电商网站会采用的一种布局方手风琴效果菜单是很多电商网站会采用的一种布局方式，如果产品类目众多，又想让用户很直观地看到想要的式，如果产品类目众多，又想让用户很直观地看到想要的产品，这时选用
20、手风琴效果菜单是一种不错的选择，进行产品，这时选用手风琴效果菜单是一种不错的选择，进行纵向菜单设计时可以考虑手风琴效果菜单，如图纵向菜单设计时可以考虑手风琴效果菜单，如图12-30 12-30 所所示。示。图图 12-30 手风琴效果菜单手风琴效果菜单 实例运行效果如图实例运行效果如图 12-31 12-31 所示。所示。图图 12-31 手风琴效果切换菜单手风琴效果切换菜单12.4.9 12.4.9 图片放大缩小效果制作图片放大缩小效果制作 本节我们制作图片的放大缩小效果，让图片动起来，本节我们制作图片的放大缩小效果，让图片动起来，产生交互效果，如图产生交互效果，如图 12-32 12-32
21、 所示。所示。图图 12-32 特卖汇图片特卖汇图片 实例运行效果如图实例运行效果如图 12-33 12-33 所示。所示。图图 12-33 图片放大缩小图片放大缩小12.5 12.5 本章总结本章总结 本章我们主要使用了本章我们主要使用了 jQuery jQuery 技术来实现携程网站上的技术来实现携程网站上的一些常用的有代表性的特效，包括网站注册表单布局设计、一些常用的有代表性的特效，包括网站注册表单布局设计、倒计时交互设计、网站登录布局与交互设计、导航菜单设计、倒计时交互设计、网站登录布局与交互设计、导航菜单设计、海报轮播效果设计、页签切换效果设计、左右滑动切换效果海报轮播效果设计、页签切换效果设计、左右滑动切换效果设计、手风琴效果菜单设计、图片放大缩小效果。通过本章设计、手风琴效果菜单设计、图片放大缩小效果。通过本章的学习，希望读者能加强对的学习，希望读者能加强对 jQuery jQuery 的使用，同时掌握实际的使用，同时掌握实际项目中经常会用到的一些特效。项目中经常会用到的一些特效。
