第十节 JavaScript 网页特效.pptVIP

中山大学计算机科学系 第十章 JavaScript 网页特效 介绍一些实现特殊效果的动态网页编程实例，分为文字特效、图片特效、时间特效、窗体特效、鼠标和菜单这六类 操控元素的大小与位置 CSS 滤镜 文字特效 图片特效 时间特效 窗体特效 鼠标 菜单 中山大学计算机科学系 * * 10.1 操控元素的大小与位置 设置元素的大小与位置: 使用样式对象的长度属性 获取元素的大小与位置:使用元素对象的长度属性 中山大学计算机科学系 * * 10.1.1 设置元素的大小与位置 Style 对象含有以下3组长度属性： CSS 长度属性：包括 width、height、left 和 top,其值是字符串，并且带单位。如： testBlock.style.width=7cm; pixel 长度属性：包括 pixelWidth、pixelHeight、pixelLeft 和 pixelTop。其值是整数，单位 px。如： testBlock.style.pixelLeft=15; pos 长度属性：包括 posWidth、posHeight、posLeft 和 posTop。其值是浮点数，表示 width、height、left 和 top 属性值中的数值部分。如： testBlock.style.posHeight=0.5; 例10.1 中山大学计算机科学系 * * 10.1.2 获取元素的大小与位置 方法1:使用 Style 对象的长度属性。 缺限1:若没有设置，则读取的值是空字符串或 0； 缺限2:若定位方式是static，则 left、top 无效 方法2: 客户区：依次包括内容区和内边距，不包括滚动条 clientWidth、clientHeight:客户区大小 clientLeft、clientTop:在偏移区中的水平、垂直距离 偏移区：依次包括内容区、内边距和边框 offsetWidth、offsetHeight: 偏移区的大小 offsetLeft、offsetTop:在其包含块客户区中的位置 例10.2 中山大学计算机科学系 * * 10.1.3 操控滚动区 滚动区:表示客户区中的可视内容 属性:scrollWidth、scrollHeight、scrollLeft 、scrollTop 方法：scrollIntoView(aTop)、doScroll( [sAction]) 事件：onscroll 计算滚动区大小 基本宽度=元素的左内边距+子元素的左外边距+子元素偏移区宽度 实际宽度=Max(基本宽度,元素客户区的宽度) 中山大学计算机科学系 * * 10.1.3 操控滚动区 当出现滚动条时，客户区相当于滚动区的视窗 开始时，客户区与滚动区的左、上边界对齐，即 scrollLeft、scrollTop 属性为 0 当移动滚动条时，改变客户区在滚动区中的偏移位置 scrollLeft：左边界偏移距离 scrollTop：上边界偏移距离 例10.3 中山大学计算机科学系 * * 10.1.4 获取浏览器窗口的浏览区和页面大小 html 元素框是一种特殊的元素框 其客户区等同于浏览器窗口的浏览区 其滚动区是在浏览区中显示的页面 例10.4 显示浏览区与页面的大小 中山大学计算机科学系 * * 10.2 CSS 滤镜 一、什么是滤镜？ 滤镜是指页面元素呈现特殊的显示效果 滤镜名：Alpha、BlendTrans、Blur、Chroma、DropShadow、FlipH、FlipV、Glow、Gray、Invert、Light、Mask、RevealTrans、Shadow、Wave、Xray 二、滤镜的使用方法 使用 CSS 样式的 filter 属性，基本格式是： filter: 滤镜名(参数) 如 img {filter: Alpha(opacity=80)} img {filter: Alpha(opacity=80) FlipV()} 中山大学计算机科学系 * * 10.2 CSS 滤镜 三、示例 例10.5 图片滤镜效果 例10.6 文本滤镜效果 中山大学计算机科学系 * * 10.3 文字特效 例10.7 波浪跳动文字 例10.8 循环显示文字 例10.9 上下跳动的文字 中山大学计算机科学系 * * 10.4 图片特效 例10.10 水中倒影图片 例10.11 闪烁的图片 中山大学计算机科学系 * * 10.5 时间特效 例10.12 数字时钟 例10.13 显示或不显示数字时钟 例10.14 指针式时钟 中山大学计算机科学系 * * 10.6 窗体特效 例10.15 状态栏逐字显示“欢迎访问广州大学城” 例10.16 雪花飘落 例10.17 公告栏