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

目 录

单元1　设计基本网页特效　1

任务1-1　JavaScript实现动态加载网页内容　1

任务1-2　jQuery实现网页收藏　3

1.1　JavaScript简介　4

1.2　JavaScript主要的语法规则　5

1.3　JavaScript常用的开发工具　5

1.4　在HTML文档中嵌入JavaScript代码的方法　6

1.5　JavaScript的注释　6

1.6　JavaScript的数据类型　7

1.7　JavaScript的常量　8

1.8　JavaScript的变量　9

1.9　JavaScript的消息框　11

1.10　JavaScript的异常处理　11

1.11　JavaScript库　13

1.12　下载和替代jQuery库　13

1.13　jQuery简介　14

任务1-3　JavaScript实现关闭网页时弹出小窗口　15

任务1-4　JavaScript实现动态改变样式文件　16

任务1-5　JavaScript实现动态改变网页字体大小及关闭网页窗口　17

任务1-6　JavaScript实现播放Flash动画　19

任务1-7　JavaScript实现设为主页　20

任务1-8　jQuery实现动态设置页面的宽度和高度　20

任务1-9　利用外部JS文件动态输出网页内容　22

任务1-10　巧用CSS实现下拉菜单　22

单元2　设计日期时间类网页特效　25

任务2-1　显示常规格式的当前日期与时间　25

任务2-2　采用多种方式显示当前的日期　26

2.1　JavaScript的运算符与表达式　29

2.2　JavaScript的语句及其规则　31

2.3　JavaScript的条件语句　32

2.4　JavaScript的函数　36

2.5　JavaScript的String(字符串)对象　39

2.6　JavaScript的Math(数学)对象　40

2.7　JavaScript的Date(日期)对象　40

2.8　JavaScript的计时方法　42

2.9　JavaScript的RegExp对象及其方法　43

2.10　支持正则表达式的String对象的方法　48

2.11　JavaScript和jQuery的使用比较　51

任务2-3　不同的节日显示对应的问候语　52

任务2-4　在特定日期的特定时段显示打折促销信息　52

任务2-5　不同时间段显示不同的问候语　53

任务2-6　一周内每天输出不同的图片　54

任务2-7　实现在线考试倒计时　55

任务2-8　显示限定格式的日期　57

任务2-9　验证日期的有效性　58

任务2-10　实现限时抢购倒计时　60

单元3 设计文字类网页特效　62

任务3-1　JavaScript实现滚动网页标题栏中的文字　62

任务3-2　jQuery实现向上滚动网站促销公告　63

3.1　JavaScript的循环语句　65

3.2　HTML DOM（文档对象模型）　71

3.3　JavaScript的位置与尺寸方法　75

3.4　jQuery的选择器　82

3.5　jQuery的链式操作　83

3.6　jQuery的效果方法　83

任务3-3　JavaScript实现网页状态栏中的文字呈现打字效果　91

任务3-4　JavaScript实现网页文字滚动与等待的交替效果　92

任务3-5　JavaScript实现鼠标滑过动态改变显示内容及外观效果　93

任务3-6　JavaScript实现文本围绕鼠标旋转　95

任务3-7　jQuery实现网站动态信息滚动与等待的交替效果　97

任务3-8　JavaScript实现网站公告信息连续向上滚动　98

任务3-9　jQuery实现循环滚动网页中的文字　99

单元4 设计图片类网页特效　102

任务4-1　JavaScript实现纵向焦点图片轮换　102

任务4-2　jQuery实现带左右按钮控制焦点图片切换　106

4.1　JavaScript的对象　109

4.2　jQuery的文档操作方法　112

任务4-3　JavaScript实现控制网页中的图片尺寸　115

任务4-4　JavaScript实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸　115

任务4-5　JavaScript实现网页中图片连续向上滚动　117

任务4-6　JavaScript实现具有滤镜效果的横向焦点图片轮换　118

任务4-7　JavaScript实现具有手风琴效果的横向焦点图片轮换　122

任务4-8　JavaScript实现带缩略图且双向移动的横向焦点图轮换　125

任务4-9　JavaScript实现随滚动条的滑块移动上下滑动图片　127

任务4-10　jQuery实现图片纵向移动的焦点图片轮换　129

任务4-11　jQuery实现具有滤镜效果的横向焦点图片轮换　131

任务4-12　jQuery实现鼠标滑过图片时预览大图　134

任务4-13　jQuery实现单击箭头按钮切换图片　136

任务4-14　JavaScript实现图片连续向左滚动　138

任务4-15　JavaScript实现通用横向焦点图片轮换　139

任务4-16　jQuery实现图片纵向切换　142

任务4-17　jQuery实现自动与手动均可切换的焦点图片轮换　143

任务4-18　jQuery实现单击左右箭头实现图片滚动效果　146

单元5　设计表单控件类网页特效　149

任务5-1　实现注册表单中的网页特效　149

任务5-2　实现反馈意见表单中的网页特效　156

5.1　JavaScript的事件　158

5.2　JavaScript的事件方法　161

5.3　jQuery的事件方法　161

任务5-3　JavaScript实现邮箱自动导航　163

任务5-4　JavaScript实现从自定义列表框中选择商品类型　165

任务5-5　JavaScript实现获取表单控件的设置值　167

任务5-6　jQuery实现自定义列表框与单击清空输入框内容　171

任务5-7　jQuery实现动态改变购买数量　173

任务5-8　JavaScript实现输出列表框中被选项的文本内容　175

任务5-9　JavaScript实现利用列表框切换网页　176

任务5-10　jQuery实现验证页面页码　177

单元6 设计导航菜单类网页特效　179

任务6-1　应用className和display等属性实现横向下拉菜单　179

任务6-2　应用jQuery的hover事件和addClass等方法实现横向导航菜单　182

任务6-3　应用jQuery的bind和attr等方法实现纵向导航菜单　184

6.1　JavaScript的this指针　186

6.2　jQuery的属性操作方法　187

6.3　jQuery的CSS操作方法　187

任务6-4　应用JavaScript的onmouseover等事件和className属性设计横向导航菜单　188

任务6-5　应用DOM的getElementById和className属性设计横向导航菜单　190

任务6-6　应用jQuery的hover事件和CSS方法设计横向导航菜单　192

任务6-7　应用jQuery的find和animate等方法设计横向导航菜单　194

任务6-8　应用jQuery的one和each等方法设计复杂导航菜单　197

任务6-9　应用HTML元素的样式属性设计横向下拉菜单　200

任务6-10　应用jQuery的show和hide等方法设计纵向导航菜单　201

任务6-11　应用jQuery的slideDown和slideUp等方法设计有滑动效果的横向下拉菜单　203

任务6-12　应用jQuery的slideDown和fadeOut等方法设计下拉菜单　204

单元7 设计选项卡类网页特效　206

任务7-1 应用setInterval函数和display属性实现选项卡的手动切换和自动切换　206

任务7-2　应用jQuery的index和find等方法实现横向选项卡　209

7.1　JavaScript的数组对象　210

7.2　JSON及其使用　211

任务7-3　应用DOM的className和style等属性设计纵向选项卡　213

任务7-4　应用DOM的className和style等属性设计横向选项卡　215

任务7-5　应用DOM的parentNode属性和JSON设计纵向选项卡　218

任务7-6　应用仿jQuery的attr方法设计横向选项卡　220

任务7-7　应用JavaScript的push和jQuery的animate等方法设计横向选项卡与图文滚动特效　223

任务7-8　应用jQuery的each和css方法设计纵向选项卡　225

任务7-9　应用DOM的getElementById和className等属性设计横向选项卡　227

任务7-10　应用jQuery的mouseover和show等方法设计横向选项卡　229

单元8　设计内容展开与折叠类网页特效　231

任务8-1　应用jQuery的each和hasClass等方法设计网页内容折叠与展开特效　231

任务8-2　应用jQuery的toggle和css等方法实现网页内容多层折叠与展开特效　233

8.1　BOM(浏览器对象模型)　235

8.2　jQuery的尺寸方法　239

任务8-3　应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效　239

任务8-4　应用JavaScript的getElementsByTagName和className等方法或属性设计网页内容折叠与展开特效　241

任务8-5　应用jQuery的bind和css等方法设计网页内容折叠与展开特效　243

任务8-6 应用jQuery的slideUp和slideDown等方法设计网页内容折叠与展开特效　245

任务8-7　应用DOM的getElementById方法和className属性设计网页内容折叠与展开特效　247

任务8-8　应用jQuery的hover和click事件设计网页内容折叠与展开特效　249

任务8-9　应用jQuery的toggle和hasClass方法设计网页内容折叠与展开特效　251

任务8-10　应用jQuery的data和animate等方法设计网页内容折叠与展开特效　252

单元9　设计页面类网页特效　255

任务9-1　实现页面换肤网页特效　255

任务9-2　根据日期特征动态切换背景　260

9.1　正确使用cookie　265

9.2　正确区分jQuery对象和DOM对象　267

任务9-3　根据屏幕宽度自动设置网页背景和导航栏　267

任务9-4　页面快捷导航菜单的显示与隐藏　269

任务9-5　下拉窗口的打开与自动隐藏　271

任务9-6　滚动屏幕时隐藏或显示返回顶部导航栏　274

任务9-7　选购商品时打开购物车页面　275

任务9-8　动态切换页面背景与调整页面大小　276

任务9-9　浮动框架的高度自适应页面内容的高度　277

任务9-10　随着屏幕高度变化隐藏或显示返回顶部导航栏　278

任务9-11　促销信息的显示与隐藏　279

附录A jQuery的常用方法　282

A.1　jQuery的核心函数　282

A.2　jQuery的选择器　282

A.3　jQuery的遍历方法　284

A.4　jQuery的事件方法　285

A.5　jQuery的效果方法　287

A.6　jQuery的文档操作方法　288

A.7　jQuery的DOM元素方法　289

A.8　jQuery的属性操作方法　289

A.9　jQuery的CSS操作方法　289

A.10　jQuery的尺寸方法　290

A.11　jQuery的数据操作方法　290

A.12　jQuery的AJAX操作方法　291

参考文献　292

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