第17章节02图像对象的应用(346KB).pptVIP

图像对象的应用 本讲大纲： 1、图像的预装载 支持网站： 2、图片的随机显示 3、无间断的图片滚动效果 4、登录图片验证码 5、浮动广告 6、图片渐变效果 7、进度条的显示 8、图片的时钟显示 9、不断闪烁的图片 10、图片翻转效果 11、图片水波倒影 12、图片总置于顶端 图像的预装载 对于浏览器装载图像来说，只有在图像发送一个HTTP请求之后，才会被浏览器装载，当在网页中制作幻灯图像时，在服务器上获取图像可能要浪费很多时间，网页打开缓慢会严重影响到访问量，有一些浏览器采用一些措施来缓解这样的问题，例如通过本地缓存存储图像，这种方式在图片第一次被调用时依然存在上述问题，在这里笔者介绍一种图像预装载的方法来缓解图像装载缓慢的问题。 预装载是在HTTP请求图像之前将其下载到缓存的一种方式，通过使用这一方式，当页面需要图像时，图像可以立即从缓存中取出，从而能将图像立即显示在页面上。 JavaScript有一个内嵌Image类，使用该类可以进行图像的预装载，将图像的URL传递给该对象的src之后，浏览器将会进行装载请求，并将预装载的图像保存到cache中，如果有图像请求时，将调用cache内的图像，从而将图像立即显示，而不是重新装载。 例如如下语法就是实例化一个图像对象，进行图片的预装载。 语法： var preimg=new Image(); preimg.src=a.gif; 参数说明： preimg：Image对象 也可以将多个图像进行预装载，可以将这些图像放入数组中，然后使用循环将其放入缓存中。 语法： var test=[img1,img2,img3]; var test2=[]; for(var i=0;itest.length;i++){ test2[i]=new Image(); test2[i].src=test[i]+.gif; } 参数说明： test：定义图像名称的数组名称。 test2：定义图像对象的数组名称。 图片的随机显示 在网页中随机显示图片可以达到装饰和宣传的作用，例如随机变化的网页背景和横幅广告图片等。使用随机显示图片的方式可以优化网站的整体效果。 为了可以实现图片随机显示的功能，可以使用Math对象的random()函数和floor()函数。 random()函数用于返回0～1之间的随机数，如果需要返回0～某个数字的随机数只需要使用Math.random()乘以该数字的即可。例如取0～5之间的随机数，可以使用Math.random()*5语句获得。floor()函数用于返回小于或等于指定数字的最大整数。可以使用如下代码定义随机显示图片。 var test=[ [小王,工程师], [小张,翻译], [小红,家政服务], [小黄,饲养员] ]; var n=Math.floor(Math.random()*test.length); var img=document.getElementById(imgs); img.src=test[n][0]+.gif; img.alt=test[n][1]; 上述代码中首先定义一个二维数组，该二维数组的第一列代表名称，第二列代表图片的提示信息，然后取0到数组的长度的随机数赋予变量n，使用test[n][0]语句可以获取图片的名称，使用test[n][1]可以获取图片的提示信息。 其中imgs是页面中img标签定义的id特性的值，使用document.getElementById(imgs)来获取页面中的图像对象赋予到变量img中去，使用img.src表示图片的URL，使用img.alt表示图片的提示信息。 无间断的图片滚动效果 在网页设计中，通常需要考虑页面的美观程度及下载速度，这时可以对图片进行无间断循环滚动显示，这样不但可以提高页面的下载速度，而且可以简化页面，同时达到了宣传的效果。 登录图片验证码 在开发网站时，经常会用到随机显示验证码的情况，例如在网站后台管理的登录页面中加入以图片方式显示的验证码，可以防止不法分子使用注册机攻击网站的后台登录。 浮动广告 浮动广告在网页中很常见，大多数网站的宽度都是为适合800×600的分辨率而设计的，因此在使用1024×768的分辨率时，有一侧或者两侧就会有空闲的地方，为了不浪费资源，有些网站会在两边加上浮动的广告，在网页中拖曳滚动条时，浮动的广告也随着移动。 图片渐变效果 图片渐变在网页中是非常好的效果，同时实现这种效果需要结合一些非标准以及标准的属性。通常设置图片渐变使用CSS样式中滤镜alpha的opacity属性来实现图片渐变的效果。 进度条的显示 当网页装载很多图片时，进度条很有用，它可以让用户看到装载图片的进度，从应用的角度来讲，进度条是一