工业和信息化人才培养规划教材

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

分享 推荐 3 收藏 11 阅读 5.3K
陈承欢 (编著) 978-7-115-32793-2

关于本书的内容有任何问题,请联系 王威

jQuery流行新技术
示范校示范专业出品
精选9类100种常见网页特效,学以致用
¥49.80 ¥37.35 (7.5 折)
教学资源仅供教师教学使用,转载或另作他用版权方有权追究法律责任。

内容摘要

  本书是网页特效设计项目化教材。
  本书将网页特效分为9类,分别是基本网页特效、日期时间类网页特效、文字类网页特效、图片类网页特效、表单控件类网页特效、导航菜单类网页特效、选项卡类网页特效、内容展开与折叠类网页特效和页面类网页特效,同时相应地将全书分为9个教学单元,每个教学单元分析和设计一种类型的网页特效,同时将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

单元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

读者评论

  • 有这本教材的代码没吗?希望给上传一下!

    shenyongfang_2009发表于 2017/9/5 9:39:12
  • 没有案例代码?

    hunan778899发表于 2017/4/2 17:24:30
  • 案例代码列

    tangyimings发表于 2016/9/4 20:06:56

我要评论

作者介绍

陈承欢:男,教授,高级工程师,软件设计师,硕士研究生,湖南省青年骨干教师。先后获取了机械制造、工业工程、软件工程三个专业的毕业证,先后从事过技术、管理、教学三类岗位的工作,有12年的企业工作经历,具有较丰富的网站开发和管理信息系统开发经验。2008年1月,赴澳大利亚坎培门理工学院进行访问交流,学习能力标准的开发,2008年12月参加了高等职业教育研究中心主办的“以工作过程为导向的高职软件专业课程重构与课程资源开发”的专题培训。
1988年参加工作,在企业先后从事过产品装配线的设计、制造和管理,工时定额的制订与执行,生产计划的编制与控制,单机版的管理信息系统的开发与应用等方面的工作;1996年开始主要从事企业信息化的推广与应用,ERP系统的财务管理、库存管理、计划管理、销售管理等模块的上线与实施等方面的工作;2000年开始主要从事高职教学工作,先行担任过信息管理专业带头人、软件专业带头人、信息工程系教学副主任等职务,先后主讲了《管理信息系统开发》、《网页设计与制作》、《Web应用程序设计》、《信息系统应用》等10多门课程的教学,担任系主任后,仍坚持每学期主讲一门课程,每学年都指导学生毕业设计,同时兼任计算机多媒体技术专业带头人。
从事10多年的职业教育,在教学科研、团队建设、教学管理、指导青年教师等方面都取了突出的成绩。曾荣获各级各类奖励29项,其中一等奖4项,教学成果奖1项,曾连续5年教学质量考核荣获第一名,两次荣获院级科研十佳;主持或参与课题研究25项,2007年主持的精品课程《网页设计与制作》成功申报为国家级精品课程,2008年参与的精品课程《JSP程序设计》成功申报为国家级精品课程,2006年主持的课题《基于岗位需求的高职软件专业模块化课程体系的构建》成功申报为湖南省教学科学“十一五”规划重点课题,中期检查荣获优秀;先后主持了《科研工作量计算与管理系统》、《计算机算法在ERP中的应用与研究》、《教室电源智能型节能中央控制系统开发》的软件开发子课题等多项应用性课题的开发与实施;近五年公开发表论文26篇,其中核心期刊发表论文8篇;主编、参编教材38本,其中国家规划规划教材3本,2006年被人民邮电出版社聘任为专家委员会委员,2008年被高等教育出版社聘任教材策划开发顾问,并分别与高等教育出版社、人民邮电出版社、清华大学出版社、电子工业出版社、机械工业出版社合作开发了计算机应用、信息系统开发、数据库、网站开发与网页设计、软件工程等模块的成套教材。
在教学过程中,注重不断更新教学观念、总结教学规律、创新教学方法、构建适应高职教育的教学模式、技能训练模式和教材开发模式。开发高职教材率先以真实项目或任务为载体组织教学内容、面向教学全过程设置教学环节,率先开发理论实践一体化的成套教材并在全国多所本科、高院学院的教学实施中取得较好的效果,率先推行技能训练的五步法:引导示范、同步训练、拓展实践、综合实战、工学结合项目开发,率先提出“通用技能+专项技能+综合技能+岗位素质”的能力培养体系,率先在教材开发、教学实施中推行“教、练、评”一体化,较早采用了以项目或任务为评价单元的过程性考核为主,终结性考核为辅的考核评价方法,这些全新的教学方法和模式都已有多年的实施经验,已逐步成熟并在多所高职学院推广。

推荐用户

同系列书

购买本书用户

相关图书

人邮微信
本地服务
人邮微信
教师服务
二维码
读者服务
读者服务
返回顶部
返回顶部