第十章 JavaScript 网页特效

第十章JavaScript网页特效介绍一些实现特殊效果的动态网页编程实例，分为文字特效、图片特效、时间特效、窗体特效、鼠标和菜单这六类操控元素的大小与位置CSS滤镜文字特效图片特效时间特效窗体特效鼠标菜单中山大学计算机科学系2020/1/23110.1操控元素的大小与位置设置元素的大小与位置:使用样式对象的长度属性获取元素的大小与位置:使用元素对象的长度属性中山大学计算机科学系2020/1/23210.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中山大学计算机科学系2020/1/23310.1.2获取元素的大小与位置方法1:使用Style对象的长度属性。缺限1:若没有设置，则读取的值是空字符串或0；缺限2:若定位方式是static，则left、top无效方法2:客户区：依次包括内容区和内边距，不包括滚动条•clientWidth、clientHeight:客户区大小•clientLeft、clientTop:在偏移区中的水平、垂直距离偏移区：依次包括内容区、内边距和边框•offsetWidth、offsetHeight:偏移区的大小•offsetLeft、offsetTop:在其包含块客户区中的位置例10.2中山大学计算机科学系2020/1/23410.1.3操控滚动区滚动区:表示客户区中的可视内容属性:scrollWidth、scrollHeight、scrollLeft、scrollTop方法：scrollIntoView(aTop)、doScroll([sAction])事件：onscroll计算滚动区大小基本宽度=元素的左内边距+子元素的左外边距+子元素偏移区宽度实际宽度=Max(基本宽度,元素客户区的宽度)中山大学计算机科学系2020/1/23510.1.3操控滚动区当出现滚动条时，客户区相当于滚动区的视窗开始时，客户区与滚动区的左、上边界对齐，即scrollLeft、scrollTop属性为0当移动滚动条时，改变客户区在滚动区中的偏移位置scrollLeft：左边界偏移距离scrollTop：上边界偏移距离例10.3中山大学计算机科学系2020/1/23610.1.4获取浏览器窗口的浏览区和页面大小html元素框是一种特殊的元素框其客户区等同于浏览器窗口的浏览区其滚动区是在浏览区中显示的页面例10.4显示浏览区与页面的大小中山大学计算机科学系2020/1/23710.2CSS滤镜一、什么是滤镜？滤镜是指页面元素呈现特殊的显示效果滤镜名：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()}中山大学计算机科学系2020/1/23810.2CSS滤镜三、示例例10.5图片滤镜效果例10.6文本滤镜效果中山大学计算机科学系2020/1/23910.3文字特效例10.7波浪跳动文字例10.8循环显示文字例10.9上下跳动的文字中山大学计算机科学系2020/1/231010.4图片特效例10.10水中倒影图片例10.11闪烁的图片中山大学计算机科学系2020/1/231110.5时间特效例10.12数字时钟例10.13显示或不显示数字时钟例10.14指针式时钟中山大学计算机科学系2020/1/231210.6窗体特效例10.15状态栏逐字显示“欢迎访问广州大学城”例10.16雪花飘落例10.17公告栏循环中山大学计算机科学系2020/1/231310.7鼠标例10.18一段文字以蛇形方式跟随鼠标移动例10.19追随鼠标的带超链接的图片中山大学计算机科学系2020/1/231410.8菜单例10.20普通菜单例10.21单击一段文字，弹出一个下拉菜单中山大学计算机科学系2020/1/231510.8菜单例10.22菜单的动态卷缩、展开例10.23右击菜单中山大学计算机科学系2020/1/2316