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

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

ID:50324726

大小:3.77 MB

页数:45页

时间:2020-03-08

JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt_第1页
JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt_第2页
JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt_第3页
JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt_第4页
JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt_第5页
资源描述:

《JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元4 设计图片类网页特效.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、单元4设计图片类网页特效任务4-1JavaScript实现纵向焦点图片轮换在网页0401.html中,JavaScript实现的纵向焦点图片轮换效果如图4-1所示,该焦点图片每隔一段时间自动进行切换,鼠标指针指向导航区域也能实现切换,焦点图显示时具有虑镜效果。图4-1JavaScript实现的纵向焦点图片轮换效果任务4-2jQuery实现带左右按钮控制焦点图片切换网页0402.html中带左右按钮控制焦点图片切换的外观效果如图4-2所示。图4-2带左右按钮控制焦点图片切换的外观效果网页0402.html中带左右按钮控制焦点图片切换对应的HTML代码如表4-4所示。序号程序代码01020304

2、05060708091011

  • 3、mages/04.jpg"alt=""/>

表4-4网页0402.html中带左右按钮控制焦点图片切换对应的HTML代码【知识必备】4.1JavaScript的对象JavaScript是一种基于对象的脚本语言,但并不完全支持面向对象的程序设计方法,JavaScript不具有继承性、封装性等面向对象的基本特性。JavaScript支持对象类型以及根据这些对象产生的实例,还支持开发对象的可重用性。JavaScr

4、ipt中的字符串、数值、数组、日期、函数都是对象,对象是拥有属性和方法的特殊数据类型。JavaScript提供多个内建对象,如String、Date、Array等。JavaScript也允许自定义对象。JavaScript是面向对象的语言,但JavaScript不使用类。在JavaScript中,不会创建类,也不会通过类来创建对象。借助JavaScript的动态性,可以创建一个空的对象(而不是类),通过动态添加属性来完善对象的功能。JavaScript基于prototype,而不是基于类。JavaScript对象其实就是属性的集合,给定一个JavaScript对象,用户可以明确地知道一个属性

5、是不是这个对象的属性,对象中的属性是无序的,并且其名称各不相同(如果有同名的,则后声明的覆盖先声明的)。1.JavaScript对象的属性和方法2.创建JavaScript对象(1)直接使用键值对的形式创建对象。(2)通过赋值方式定义并创建对象的实例。(3)定义对象的原型,然后使用new操作符来构筑新的对象。3.访问JavaScript的对象(1)访问对象的属性。(2)访问对象的方法。4.JavaScript的原型对象4.2jQuery的文档操作方法1.获得与设置页面元素的内容2.获取与设置页面元素的属性值3.添加页面元素(1)jQuery的append()方法。(2)jQuery的prep

6、end()方法。(3)jQuery的after()方法。(4)jQuery的before()方法。4.删除元素(1)jQuery的remove()方法。(2)jQuery的empty()方法。【引导训练】任务4-3JavaScript实现控制网页中的图片尺寸【任务描述】网页中图片的初始尺寸可能偏大或者偏小,不符合网页中图片的要求,这就需要对网页中的图片尺寸进行有效控制,使图片尺寸符合网页设计要求。任务4-4JavaScript实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸【任务描述】限制网页中图片的尺寸,将鼠标指针置于网页中的图片上,转动鼠标滚轮时缩放图片。任务4-5JavaScript实现网页

7、中图片连续向上滚动【任务描述】实现网页0405.html中图片连续向上滚动的效果,其外观效果如图4-3所示。图4-3网页0405.html中图片连续向上滚动的外观效果任务4-6JavaScript实现具有滤镜效果的横向焦点图片轮换【任务描述】在网页中像切换幻灯片一样自动切换图片,可以有效地利用网页空间,吸引浏览者的眼球。在网页0406.html中实现具有滤镜效果的横向焦点图片轮换效果。其外观效果如图4-4所示

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。