网页特效设计基础第12章 综合实战——使用jQuery 实现携程网站特效

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