JavaScript+jQuery网页特效设计实例教程 作者 陈承欢 单元4 设计图片类网页特效.pptVIP

任务4-11 jQuery实现具有滤镜效果的横向焦点图片轮换 【任务描述】 在网页0411.html中实现具有滤镜效果的横向焦点图片轮换，其外观效果如图4-9所示。 图4-9　具有滤镜效果的横向焦点图片轮换的外观效果 任务4-12 jQuery实现鼠标滑过图片时预览大图 【任务描述】 在网页0412.html中，鼠标滑过图片时预览大图的外观效果如图4-10所示。 图4-10　鼠标滑过图片时预览大图的外观效果 任务4-13 jQuery实现单击箭头按钮切换图片 【任务描述】 在网页0413.html中单击箭头按钮切换图片的外观效果如图4-11所示。 图4-11　单击箭头按钮切换图片的外观效果 任务4-14 JavaScript实现图片连续向左滚动 【任务描述】 在网页0414.html中实现图片连续向左滚动的外观效果如图4-12所示。 图4-12　在网页0414.html中实现图片连续向左滚动的外观效果 任务4-15 JavaScript实现通用横向焦点图片轮换 【任务描述】 网页0415.html的通用横向焦点图片轮换的外观效果如图4-13所示。 图4-13　通用横向焦点图片轮换的外观效果 任务4-16 jQuery实现图片纵向切换 【任务描述】 在网页0416.html中实现图片纵向切换的外观效果如图4-14所示。 图4-14　在网页0416.html中实现图片纵向切换的外观效果 任务4-17 jQuery实现自动与手动均可切换的焦点图片轮换 【任务描述】 在网页0417.html中，自动与手动均可切换的焦点图片轮换的外观效果如图4-15所示。 图4-15　网页0417.html中自动与手动均可切换的焦点图片轮换的外观效果 任务4-18 jQuery实现单击左右箭头实现图片滚动效果 【任务描述】 在网页0418.html中，单击左右箭头实现图片滚动的外观效果如图4-16所示。 图4-16　网页0418.html中单击左右箭头实现图片滚动的外观效果 单元4 设计图片类网页特效 任务4-1 JavaScript实现纵向焦 点图片轮换 在网页0401.html中，JavaScript实现的纵向焦点图片轮换效果如图4-1所示，该焦点图片每隔一段时间自动进行切换，鼠标指针指向导航区域也能实现切换，焦点图显示时具有虑镜效果。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 图4-1　JavaScript实现的纵向焦点图片轮换效果 任务4-2 jQuery实现带左右按钮控制焦点图片切换 网页0402.html中带左右按钮控制焦点图片切换的外观效果如图4-2所示。 图4-2　带左右按钮控制焦点图片切换的外观效果 网页0402.html中带左右按钮控制焦点图片切换对应的HTML代码如表4-4所示。 序号 程序代码 01 02 03 04 05 06 07 08 09 10 11 div class=wrapper div id=focus ul lia href= target=_blankimg src=images/01.jpg alt= //a/li lia href= target=_blankimg src=images/02.jpg alt= //a/li lia href= target=_blankimg src=images/03.jpg alt= //a/li lia href= target=_blankimg src=images/04.jpg alt= //a/li lia href= target=_blankimg src=images/05.jpg alt= //a/li /ul /div /div 表4-4　网页0402.html中带左右按钮控制焦点图片切换对应的HTML代码 【知识必备】 4.1　JavaScript的对象 JavaScript是一种基于对象的脚本语言，但并不完全支持面向对象的程序设计方法，JavaScript不具有继承性、封装性等面向对象的基本特性。 JavaScript支持对象类型以及根据这些对象产生的实例，还支持开发对象的可重用性。 JavaScript中的字符串、数值、数组、日 期、函数都是对象，对象是拥有属性和方法的 特殊数据类型。 JavaScript提供多个内建对象，如String、Date、Array