基础知识：图像对象IMAGES.PPT

第四章 处理图像 基础知识：图像对象(IMAGES) 当文件中包含IMG标记时，JavaScript自动建立相对应的图像对象。这些对象可以用document的images属性，搭配数组的索引方式来进行访问控制。例如：文件中的第一个图像对象，叫做document. images [0], 第二个图像对象，叫做document. images [1],依次类推。 基础知识：图像对象(IMAGES) 1.建立图像对象：new image([宽度,][高度]) 2.属性 src 图像的URL，SRC属性。 border 图像的边框，IMG标记的 BORDER属性。 width 图像的宽度，WIDTH属性。 基础知识：图像对象(IMAGES) height 图像的高度，HEIGHT属性。 hspace 图像水平空白，HSPACE属性。 vspace 图像垂直空白，VSPACE属性。 lowsrc 图像的分辨率版本，LOWSRC属性。 complete 表示浏览器是否完成了图像的加载，一个布尔值。 基础知识：math对象 小数转整数 var f = 1.5; var i = Math.round(f); //结果:2 (四舍五入) var i = Math.ceil(f); //结果:2 (返回大于f的最小整数) var i = Math.floor(f); //结果:1 (返回小于f的最大整数) 随机数 返回0-1之间的任意小数 var rnd = Math.random(); 返回0-n之间的任意整数(不包括n) var rnd = Math.floor(Math.random() * n) 4.1 创建翻转器 翻转器实现思想：第一个图像是原始图像，它与网页的其他部分一起加载和现实。当用户将鼠标移动到第一个图像上时，浏览器快速地将第一个图像替换为第二个图像，即替换图像，这样就产生了运动或动画的效果。 举例：一个最基本的翻转器 4.1 创建翻转器 head titleA Simple Rollover/title /head body bgcolor=#FFFFFF a href=next.html onmouseover=document.arrow.src=images/arrow_on.gif onmouseout=document.arrow.src=images/arrow_off.gifimg src=images/arrow_off.gif width=147 height=82 border=0 name=arrow alt=arrow //a /body /html 4.2 创建更有效的翻转器 4.1提到的翻转器有一个缺点，从服务器获取第二个图像时有可能造成延迟，会影响动画效果。 使用 JavaScript预先将所有图像加载到浏览器的缓存中以避免此问题，创建更有效的翻转器。 示例：见课本脚本4－2，4－3 4.3 构建三状态翻转器 三状态翻转器就是能够显示图像的三个版本的翻转器。除了原始图像和当用户将鼠标移动到图像上时显示的图像之外，还有第三个版本，这个版本在按钮本身被点击时显示。 示例：见课本脚本4－4，4－5 4.4 由链接触发翻转器 在前面的示例中用户都是通过将鼠标移动到图像上来触发翻转器，这里要说的方法是让翻转器在鼠标指向文本链接时翻转。 示例：见课本脚本4－6，4－7 4.5 让多个链接触发一个翻转器 可以让几个不同的图像触发同一个翻转器，这种技术可以用在对多个图像进行说明的地方。 示例：见课本脚本4－8，4－9 4.6 处理多个翻转器 当触发翻转器的图像本身也是一个翻转器时，就需要在前面示例的基础上做一些改进，以使程序可以同时处理多个翻转器。 示例：见课本脚本4－10，4－11 4.7 创建循环的广告条 使用JavaScript实现页面循环显示许多GIF图像。 示例： html xmlns=/1999/xhtml head titleRotating Banner/title script type=text/javascript src=script07.js/script /head body bgcolor=#FFFFFF div align=center img src=images/reading1.gif width=400 height=75 id=adBanner alt=Ad Banner / /div /body /html 4.7 创建循环的广告条 window.onload = rotate; var thisAd = 0; function rotate() { var adImages =ne