JavaScript+jQuery网页特效设计实例教程

　　jQuery流行新技术
　　示范校示范专业出品
　　精选9类100种常见网页特效，学以致用

　　本书是网页特效设计项目化教材。　　本书将网页特效分为9类，分别是基本网页特效、日期时间类网页特效、文字类网页特效、图片类网页特效、表单控件类网页特效、导航菜单类网页特效、选项卡类网页特效、内容展开与折叠类网页特效和页面类网页特效，同时相应地将全书分为9个教学单元，每个教学单元分析和设计一种类型的网页特效，同时将JavaScript和jQuery的相关知识合理地安排到各个教学单元。　　本书可以作为普通高等院校、高等或中等职业院校和高等专科院校各专业网页特效设计课程的教材，也可以作为网页特效设计的培训用书及技术用书。

单元1　设计基本网页特效　
任务1-1　JavaScript实现动态加载网页内容　
任务1-2　jQuery实现网页收藏　
1.1　JavaScript简介　
1.2　JavaScript主要的语法规则　
1.3　JavaScript常用的开发工具　
1.4　在HTML文档中嵌入JavaScript代码的方法　
1.5　JavaScript的注释　
1.6　JavaScript的数据类型　
1.7　JavaScript的常量　
1.8　JavaScript的变量　
1.9　JavaScript的消息框　
1.10　JavaScript的异常处理　
1.11　JavaScript库　
1.12　下载和替代jQuery库　
1.13　jQuery简介　
任务1-3　JavaScript实现关闭网页时弹出小窗口　
任务1-4　JavaScript实现动态改变样式文件　
任务1-5　JavaScript实现动态改变网页字体大小及关闭网页窗口　
任务1-6　JavaScript实现播放Flash动画　
任务1-7　JavaScript实现设为主页　
任务1-8　jQuery实现动态设置页面的宽度和高度　
任务1-9　利用外部JS文件动态输出网页内容　
任务1-10　巧用CSS实现下拉菜单　

单元2　设计日期时间类网页特效　
任务2-1　显示常规格式的当前日期与时间　
任务2-2　采用多种方式显示当前的日期　
2.1　JavaScript的运算符与表达式　
2.2　JavaScript的语句及其规则　
2.3　JavaScript的条件语句　
2.4　JavaScript的函数　
2.5　JavaScript的String(字符串)对象　
2.6　JavaScript的Math(数学)对象　
2.7　JavaScript的Date(日期)对象　
2.8　JavaScript的计时方法　
2.9　JavaScript的RegExp对象及其方法　
2.10　支持正则表达式的String对象的方法　
2.11　JavaScript和jQuery的使用比较　
任务2-3　不同的节日显示对应的问候语　
任务2-4　在特定日期的特定时段显示打折促销信息　
任务2-5　不同时间段显示不同的问候语　
任务2-6　一周内每天输出不同的图片　
任务2-7　实现在线考试倒计时　
任务2-8　显示限定格式的日期　
任务2-9　验证日期的有效性　
任务2-10　实现限时抢购倒计时　

单元3 设计文字类网页特效　
任务3-1　JavaScript实现滚动网页标题栏中的文字　
任务3-2　jQuery实现向上滚动网站促销公告　
3.1　JavaScript的循环语句　
3.2　HTML DOM（文档对象模型）　
3.3　JavaScript的位置与尺寸方法　
3.4　jQuery的选择器　
3.5　jQuery的链式操作　
3.6　jQuery的效果方法　
任务3-3　JavaScript实现网页状态栏中的文字呈现打字效果　
任务3-4　JavaScript实现网页文字滚动与等待的交替效果　
任务3-5　JavaScript实现鼠标滑过动态改变显示内容及外观效果　
任务3-6　JavaScript实现文本围绕鼠标旋转　
任务3-7　jQuery实现网站动态信息滚动与等待的交替效果　
任务3-8　JavaScript实现网站公告信息连续向上滚动　
任务3-9　jQuery实现循环滚动网页中的文字　

单元4 设计图片类网页特效　
任务4-1　JavaScript实现纵向焦点图片轮换　
任务4-2　jQuery实现带左右按钮控制焦点图片切换　
4.1　JavaScript的对象　
4.2　jQuery的文档操作方法　
任务4-3　JavaScript实现控制网页中的图片尺寸　
任务4-4　JavaScript实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸　
任务4-5　JavaScript实现网页中图片连续向上滚动　
任务4-6　JavaScript实现具有滤镜效果的横向焦点图片轮换　
任务4-7　JavaScript实现具有手风琴效果的横向焦点图片轮换　
任务4-8　JavaScript实现带缩略图且双向移动的横向焦点图轮换　
任务4-9　JavaScript实现随滚动条的滑块移动上下滑动图片　
任务4-10　jQuery实现图片纵向移动的焦点图片轮换　
任务4-11　jQuery实现具有滤镜效果的横向焦点图片轮换　
任务4-12　jQuery实现鼠标滑过图片时预览大图　
任务4-13　jQuery实现单击箭头按钮切换图片　
任务4-14　JavaScript实现图片连续向左滚动　
任务4-15　JavaScript实现通用横向焦点图片轮换　
任务4-16　jQuery实现图片纵向切换　
任务4-17　jQuery实现自动与手动均可切换的焦点图片轮换　
任务4-18　jQuery实现单击左右箭头实现图片滚动效果　

单元5　设计表单控件类网页特效　
任务5-1　实现注册表单中的网页特效　
任务5-2　实现反馈意见表单中的网页特效　
5.1　JavaScript的事件　
5.2　JavaScript的事件方法　
5.3　jQuery的事件方法　
任务5-3　JavaScript实现邮箱自动导航　
任务5-4　JavaScript实现从自定义列表框中选择商品类型　
任务5-5　JavaScript实现获取表单控件的设置值　
任务5-6　jQuery实现自定义列表框与单击清空输入框内容　
任务5-7　jQuery实现动态改变购买数量　
任务5-8　JavaScript实现输出列表框中被选项的文本内容　
任务5-9　JavaScript实现利用列表框切换网页　
任务5-10　jQuery实现验证页面页码　

单元6 设计导航菜单类网页特效　
任务6-1　应用className和display等属性实现横向下拉菜单　
任务6-2　应用jQuery的hover事件和addClass等方法实现横向导航菜单　
任务6-3　应用jQuery的bind和attr等方法实现纵向导航菜单　
6.1　JavaScript的this指针　
6.2　jQuery的属性操作方法　
6.3　jQuery的CSS操作方法　
任务6-4　应用JavaScript的onmouseover等事件和className属性设计横向导航菜单　
任务6-5　应用DOM的getElementById和className属性设计横向导航菜单　
任务6-6　应用jQuery的hover事件和CSS方法设计横向导航菜单　
任务6-7　应用jQuery的find和animate等方法设计横向导航菜单　
任务6-8　应用jQuery的one和each等方法设计复杂导航菜单　
任务6-9　应用HTML元素的样式属性设计横向下拉菜单　
任务6-10　应用jQuery的show和hide等方法设计纵向导航菜单　
任务6-11　应用jQuery的slideDown和slideUp等方法设计有滑动效果的横向下拉菜单　
任务6-12　应用jQuery的slideDown和fadeOut等方法设计下拉菜单　

单元7 设计选项卡类网页特效　
任务7-1 应用setInterval函数和display属性实现选项卡的手动切换和自动切换　
任务7-2　应用jQuery的index和find等方法实现横向选项卡　
7.1　JavaScript的数组对象　
7.2　JSON及其使用　
任务7-3　应用DOM的className和style等属性设计纵向选项卡　
任务7-4　应用DOM的className和style等属性设计横向选项卡　
任务7-5　应用DOM的parentNode属性和JSON设计纵向选项卡　
任务7-6　应用仿jQuery的attr方法设计横向选项卡　
任务7-7　应用JavaScript的push和jQuery的animate等方法设计横向选项卡与图文滚动特效　
任务7-8　应用jQuery的each和css方法设计纵向选项卡　
任务7-9　应用DOM的getElementById和className等属性设计横向选项卡　
任务7-10　应用jQuery的mouseover和show等方法设计横向选项卡　

单元8　设计内容展开与折叠类网页特效　
任务8-1　应用jQuery的each和hasClass等方法设计网页内容折叠与展开特效　
任务8-2　应用jQuery的toggle和css等方法实现网页内容多层折叠与展开特效　
8.1　BOM(浏览器对象模型)　
8.2　jQuery的尺寸方法　
任务8-3　应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效　
任务8-4　应用JavaScript的getElementsByTagName和className等方法或属性设计网页内容折叠与展开特效　
任务8-5　应用jQuery的bind和css等方法设计网页内容折叠与展开特效　
任务8-6 应用jQuery的slideUp和slideDown等方法设计网页内容折叠与展开特效　
任务8-7　应用DOM的getElementById方法和className属性设计网页内容折叠与展开特效　
任务8-8　应用jQuery的hover和click事件设计网页内容折叠与展开特效　
任务8-9　应用jQuery的toggle和hasClass方法设计网页内容折叠与展开特效　
任务8-10　应用jQuery的data和animate等方法设计网页内容折叠与展开特效　

单元9　设计页面类网页特效　
任务9-1　实现页面换肤网页特效　
任务9-2　根据日期特征动态切换背景　
9.1　正确使用cookie　
9.2　正确区分jQuery对象和DOM对象　
任务9-3　根据屏幕宽度自动设置网页背景和导航栏　
任务9-4　页面快捷导航菜单的显示与隐藏　
任务9-5　下拉窗口的打开与自动隐藏　
任务9-6　滚动屏幕时隐藏或显示返回顶部导航栏　
任务9-7　选购商品时打开购物车页面　
任务9-8　动态切换页面背景与调整页面大小　
任务9-9　浮动框架的高度自适应页面内容的高度　
任务9-10　随着屏幕高度变化隐藏或显示返回顶部导航栏　
任务9-11　促销信息的显示与隐藏　

附录A jQuery的常用方法　
A.1　jQuery的核心函数　
A.2　jQuery的选择器　
A.3　jQuery的遍历方法　
A.4　jQuery的事件方法　
A.5　jQuery的效果方法　
A.6　jQuery的文档操作方法　
A.7　jQuery的DOM元素方法　
A.8　jQuery的属性操作方法　
A.9　jQuery的CSS操作方法　
A.10　jQuery的尺寸方法　
A.11　jQuery的数据操作方法　
A.12　jQuery的AJAX操作方法　

参考文献