单元4--设计图片类网页特效.ppt
( 4.5 )《单元4--设计图片类网页特效.ppt》由会员分享，可在线阅读，更多相关《单元4--设计图片类网页特效.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
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
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 单元 设计 图片 网页 特效
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内