网页特效设计任务驱动教程 第2版 单元4 设计图片类网页特效.pptxVIP

单元4设计图片类网页特效JavaScript+jQuery网页特效设计任务驱动教程（第2版） 学会设计图片类网页特效学会正确创建和访问JavaScript 对象熟悉JavaScript 对象的属性和方法熟练使用jQuery 文档的操作相关方法，包括获得与设置页面元素的内容、获取与设置页面元素的属性值、添加页面元素和删除元素等了解JavaScript 的原型对象教学目标pedagogical objectives 目录导航任务4-1 JavaScript 实现纵向焦点图片轮换任务4-3 JavaScript 实现控制网页中的图片尺寸任务4-5 JavaScript 实现网页中图片连续向上滚动任务4-6 JavaScript 实现具有滤镜效果的横向焦点图片轮换任务4-2 jQuery 实现带左右按钮控制焦点图片切换任务4-4 JavaScript 实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸任务4-7 JavaScript 实现具有手风琴效果的横向焦点图片轮换任务4-8 JavaScript 实现带缩略图且双向移动的横向焦点图轮换任务4-9 jQuery 实现图片纵向移动的焦点图片轮换任务4-10 jQuery 实现具有滤镜效果的横向焦点图片轮换任务4-11 jQuery 实现鼠标指针滑过图片时预览大图任务4-12 jQuery 实现单击箭头按钮切换图片任务4-13 JavaScript 实现图片连续向左滚动任务4-14 JavaScript 实现通用横向焦点图片轮换任务4-15 JavaScript 实现网页图片拖曳任务4-16 jQuery 实现图片纵向切换任务4-17 jQuery 实现自动与手动均可切换的焦点图片轮换任务4-18 jQuery 实现单击左右箭头滚动图片 任务4-1 JavaScript 实现纵向焦点图片轮换在网页0401.html 中，JavaScript 实现的纵向焦点图片轮换效果如图所示，该焦点图片每隔一段时间自动进行切换，鼠标指针指向导航区域也能实现切换，焦点图显示时具有滤镜效果。 任务4-1 JavaScript 实现纵向焦点图片轮换在网页0401.html 中，JavaScript 实现的纵向焦点图片轮换效果对应的HTML 代码如表所示。序号程序代码0102030405060708091011121314151617div id=nabtable id=pictable style=display: none tbody tr tdimg src=images/ 亚丁.jpg border=0 //td td 极致美景 中国七大秋色斑斓地 /td td#/td /tr tr tdimg src=images/ 云南大理.jpg border=0 //td td 畅游大理 体味民族风情/td td#/td /tr tr tdimg src=images/ 桂林初冬.jpg border=0 //td td 桂林初冬 浓妆淡抹最佳处/td td//td 任务4-1 JavaScript 实现纵向焦点图片轮换序号程序代码1819202122232425262728293031323334353637383940 /tr tr tdimg src=images/ 新疆.jpg border=0 //td td 新疆库尔勒：铁关西天涯极目少行客/td td#/td/tr tr tdimg src=images/ 兴安灵渠.jpg border=0 //td td 历史遗产：兴安灵渠/td td#/td /tr tr tdimg src=images/ 内蒙古.jpg border=0 //td td 神秘美丽的内蒙古草原/td td#/td /tr tr tdimg src=images/ 陕西.jpg width=404 height=327 border=0 //td td 回归自然 感受另类风情/td td#/td/tr /tbody/tablediv class=div_xixi……/div/div 任务4-1 JavaScript 实现纵向焦点图片轮换在网页0401.html 中实现纵向焦点图片轮换效果的主要对应的CSS 代码如表所示。序号程序代码0102030405060