《单元4--设计图片类网页特效.ppt》由会员分享，可在线阅读，更多相关《单元4--设计图片类网页特效.ppt（45页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、单元单元4 4 设计图片类网页特效设计图片类网页特效任务任务4-1 JavaScript实现纵向焦实现纵向焦点图片轮换点图片轮换 在网页在网页0401.html中，中，JavaScript实现实现的纵向焦点图片轮换效果如图的纵向焦点图片轮换效果如图4-1所示，该所示，该焦点图片每隔一段时间自动进行切换，鼠焦点图片每隔一段时间自动进行切换，鼠标指针指向导航区域也能实现切换，焦点标指针指向导航区域也能实现切换，焦点图显示时具有虑镜效果。图显示时具有虑镜效果。图图4-1JavaScript实现的纵向焦点图实现的纵向焦点图片轮换效果片轮换效果任务任务4-2 jQuery实现带左右按钮控实现带左右按钮控
2、制焦点图片切换制焦点图片切换 网页网页0402.html中带左右按钮控制焦中带左右按钮控制焦点图片切换的外观效果如图点图片切换的外观效果如图4-2所示。所示。图图4-2带左右按钮控制焦点图片切换带左右按钮控制焦点图片切换的外观效果的外观效果 网页网页0402.html中带左右按钮控制焦中带左右按钮控制焦点图片切换对应的点图片切换对应的HTML代码如表代码如表4-4所所示。示。序号序号程序代程序代码码0102030405060708091011 表表4-4网页网页0402.html中带左右按钮控中带左右按钮控制焦点图片切换对应的制焦点图片切换对应的HTML代码代码【知识必备】【知识必备】4.1
3、4.1JavaScriptJavaScript的对象的对象 JavaScript是一种基于对象的脚本语是一种基于对象的脚本语言，但并不完全支持面向对象的程序设言，但并不完全支持面向对象的程序设计方法，计方法，JavaScript不具有继承性、封装不具有继承性、封装性等面向对象的基本特性。性等面向对象的基本特性。JavaScript支持对象类型以及根据这支持对象类型以及根据这些对象产生的实例，还支持开发对象的些对象产生的实例，还支持开发对象的可重用性。可重用性。JavaScript中的字符串、数值、数组、日中的字符串、数值、数组、日期、函数都是对象，对象是拥有属性和方法的期、函数都是对象，对象是
4、拥有属性和方法的特殊数据类型。特殊数据类型。JavaScript提供多个内建对象，如提供多个内建对象，如String、Date、Array等。等。JavaScript也允许自定义对象。也允许自定义对象。JavaScript是面向对象的语言，但是面向对象的语言，但JavaScript不使用类。不使用类。在在JavaScript中，不会创建类，也不会通过类中，不会创建类，也不会通过类来创建对象。来创建对象。借助借助JavaScript的动态性，可以创建一个空的的动态性，可以创建一个空的对象（而不是类），通过动态添加属性来完善对对象（而不是类），通过动态添加属性来完善对象的功能。象的功能。JavaS
5、cript基于基于prototype，而不是基于类。，而不是基于类。JavaScript对象其实就是属性的集合，给对象其实就是属性的集合，给定一个定一个JavaScript对象，用户可以明确地知道一对象，用户可以明确地知道一个属性是不是这个对象的属性，对象中的属性个属性是不是这个对象的属性，对象中的属性是无序的，并且其名称各不相同（如果有同名是无序的，并且其名称各不相同（如果有同名的，则后声明的覆盖先声明的）。的，则后声明的覆盖先声明的）。1JavaScript对象的属性和方法对象的属性和方法2创建创建JavaScript对象对象（1）直接使用键值对的形式创建对象。）直接使用键值对的形式创建对
6、象。（2）通过赋值方式定义并创建对象的实例。）通过赋值方式定义并创建对象的实例。（3）定义对象的原型，然后使用）定义对象的原型，然后使用new操作符操作符来构筑新的对象。来构筑新的对象。3访问访问JavaScript的对象的对象（1）访问对象的属性。）访问对象的属性。（2）访问对象的方法。）访问对象的方法。4JavaScript的原型对象的原型对象4.24.2jQueryjQuery的文档操作方法的文档操作方法1获得与设置页面元素的内容获得与设置页面元素的内容2获取与设置页面元素的属性值获取与设置页面元素的属性值3添加页面元素添加页面元素（1）jQuery的的append()方法。方法。（2）
7、jQuery的的prepend()方法。方法。（3）jQuery的的after()方法。方法。（4）jQuery的的before()方法。方法。4删除元素删除元素（1）jQuery的的remove()方法。方法。（2）jQuery的的empty()方法。方法。【引导训练】【引导训练】任务任务4-3 JavaScript实现控制网实现控制网页中的图片尺寸页中的图片尺寸【任务描述】【任务描述】网页中图片的初始尺寸可能偏大或网页中图片的初始尺寸可能偏大或者偏小，不符合网页中图片的要求，这者偏小，不符合网页中图片的要求，这就需要对网页中的图片尺寸进行有效控就需要对网页中的图片尺寸进行有效控制，使图片尺
8、寸符合网页设计要求。制，使图片尺寸符合网页设计要求。任务任务4-4 JavaScript实现限制图片尺寸实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸与滑动鼠标滚轮调整图片尺寸【任务描述】【任务描述】限制网页中图片的尺寸，将鼠标指限制网页中图片的尺寸，将鼠标指针置于网页中的图片上，转动鼠标滚轮针置于网页中的图片上，转动鼠标滚轮时缩放图片。时缩放图片。任务任务4-5 JavaScript实现网页中图实现网页中图片连续向上滚动片连续向上滚动 【任务描述】【任务描述】实现网页实现网页0405.html中图片连续向上中图片连续向上滚动的效果，其外观效果如图滚动的效果，其外观效果如图4-3所示。所示。图图4
9、-3网页网页0405.html中图片连续向上中图片连续向上滚动的外观效果滚动的外观效果任务任务4-6 JavaScript实现具有滤镜实现具有滤镜效果的横向焦点图片轮换效果的横向焦点图片轮换 【任务描述】【任务描述】在网页中像切换幻灯片一样自动切在网页中像切换幻灯片一样自动切换图片，可以有效地利用网页空间，吸换图片，可以有效地利用网页空间，吸引浏览者的眼球。引浏览者的眼球。在网页在网页0406.html中实现具有滤镜效中实现具有滤镜效果的横向焦点图片轮换效果。果的横向焦点图片轮换效果。其外观效果如图其外观效果如图4-4所示。所示。图图4-4JavaScript实现的具有滤镜效实现的具有滤镜效果
10、的横向焦点图片轮换效果果的横向焦点图片轮换效果任务任务4-7 JavaScript实现具有手风实现具有手风琴效果的横向焦点图片轮换琴效果的横向焦点图片轮换【任务描述】【任务描述】在网页在网页0407.html中实现具有手风琴中实现具有手风琴效果的横向焦点图片轮换效果，其外观效果的横向焦点图片轮换效果，其外观效果如图效果如图4-5所示。所示。图图4-5具有手风琴效果的横向焦点图具有手风琴效果的横向焦点图片轮换效果片轮换效果任务任务4-8 JavaScript实现带缩略图实现带缩略图且双向移动的横向焦点图轮换且双向移动的横向焦点图轮换【任务描述】【任务描述】网页网页0408.html中带缩略图且双
11、向移中带缩略图且双向移动的横向焦点图轮换效果如图动的横向焦点图轮换效果如图4-6所示。所示。图图4-6带缩略图且双向移动的横向焦带缩略图且双向移动的横向焦点图轮换效果点图轮换效果任务任务4-9 JavaScript实现随滚动条实现随滚动条的滑块移动上下滑动图片的滑块移动上下滑动图片【任务描述】【任务描述】在网页在网页0409.html中，随滚动条滑块中，随滚动条滑块的移动，上下滑动图片的外观效果如图的移动，上下滑动图片的外观效果如图4-7所示，单击【关闭】按钮可以隐藏该所示，单击【关闭】按钮可以隐藏该图片。图片。图图4-7随滚动条滑块的移动随滚动条滑块的移动上下滑动图片的外观效果上下滑动图片的
12、外观效果任务任务4-10 jQuery实现图片纵向移实现图片纵向移动的焦点图片轮换动的焦点图片轮换【任务描述】【任务描述】在网页在网页0410.html中实现图片纵向移中实现图片纵向移动的焦点图片轮换效果，其外观效果如动的焦点图片轮换效果，其外观效果如图图4-8所示。所示。图图4-8图片纵向移动的焦点图片轮换图片纵向移动的焦点图片轮换的外观效果的外观效果任务任务4-11 jQuery实现具有滤镜效实现具有滤镜效果的横向焦点图片轮换果的横向焦点图片轮换【任务描述】【任务描述】在网页在网页0411.html中实现具有滤镜效中实现具有滤镜效果的横向焦点图片轮换，其外观效果如果的横向焦点图片轮换，其外
13、观效果如图图4-9所示。所示。图图4-9具有滤镜效果的横向焦点图片具有滤镜效果的横向焦点图片轮换的外观效果轮换的外观效果任务任务4-12 jQuery实现鼠标滑过图实现鼠标滑过图片时预览大图片时预览大图【任务描述】【任务描述】在网页在网页0412.html中，鼠标滑过图片中，鼠标滑过图片时预览大图的外观效果如图时预览大图的外观效果如图4-10所示。所示。图图4-10鼠标滑过图片时预览大图的外观效果鼠标滑过图片时预览大图的外观效果任务任务4-13 jQuery实现单击箭头按实现单击箭头按钮切换图片钮切换图片【任务描述】【任务描述】在网页在网页0413.html中单击箭头按钮切中单击箭头按钮切换图
14、片的外观效果如图换图片的外观效果如图4-11所示。所示。图图4-11单击箭头按钮切换图片的外观效果单击箭头按钮切换图片的外观效果任务任务4-14 JavaScript实现图片连续实现图片连续向左滚动向左滚动【任务描述】【任务描述】在网页在网页0414.html中实现图片连续向中实现图片连续向左滚动的外观效果如图左滚动的外观效果如图4-12所示。所示。图图4-12在网页在网页0414.html中实现图片中实现图片连续向左滚动的外观效果连续向左滚动的外观效果 任务任务4-15 JavaScript实现通用横实现通用横向焦点图片轮换向焦点图片轮换【任务描述】【任务描述】网页网页0415.html的通
15、用横向焦点图片的通用横向焦点图片轮换的外观效果如图轮换的外观效果如图4-13所示。所示。图图4-13通用横向焦点图片轮换的外观效果通用横向焦点图片轮换的外观效果任务任务4-16 jQuery实现图片纵向切换实现图片纵向切换【任务描述】【任务描述】在网页在网页0416.html中实现图片纵向切中实现图片纵向切换的外观效果如图换的外观效果如图4-14所示。所示。图图4-14在网页在网页0416.html中实现图片中实现图片纵向切换的外观效果纵向切换的外观效果任务任务4-17 jQuery实现自动与手动实现自动与手动均可切换的焦点图片轮换均可切换的焦点图片轮换【任务描述】【任务描述】在网页在网页04
16、17.html中，自动与手动均中，自动与手动均可切换的焦点图片轮换的外观效果如图可切换的焦点图片轮换的外观效果如图4-15所示。所示。图图4-15网页网页0417.html中自动与手动中自动与手动均可切换的焦点图片轮换的外观效果均可切换的焦点图片轮换的外观效果任务任务4-18 jQuery实现单击左右箭实现单击左右箭头实现图片滚动效果头实现图片滚动效果【任务描述】【任务描述】在网页在网页0418.html中，单击左右箭头实中，单击左右箭头实现图片滚动的外观效果如图现图片滚动的外观效果如图4-16所示。所示。图图4-16网页网页0418.html中单击左右箭中单击左右箭头实现图片滚动的外观效果头实现图片滚动的外观效果