复杂点的javascript翻转器._javascript翻转器作业-CSDN博客

本文链接：https://blog.csdn.net/blue7wings/article/details/8169977

上次按照书上写了简单的javascript翻转器,这次写了发杂点的,这个翻转器将图片加载到缓存中,从而造成从服务器获得图像造成的缓存.

需要的文件是,图片(xx.gif)和要反转的图片(xx_on.gif).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复杂点的翻转器</title>
<script>
window.οnlοad=rolloverInit;
function rolloverInit(){
	//查找图片文件,如果是图片且父标签是<a>就传递给setupRollover.
	for(var i=0;i<document.images.length;i++){
		if(document.images[i].parentNode.tagName=="A"){
			setupRollover(document.images[i]);
			}
		}
	}
function setupRollover(thisImage){
	thisImage.outImage=new Image();//获得传递过来的图像对象,并在其中添加outImage属性.
	thisImage.outImage.src=thisImage.src;
	thisImage.οnmοuseοut=function(){
		thisImage.src=thisImage.outImage.src;//鼠标不在图片上,图片就是原图片.
		}
		thisImage.overImage=new Image();
		thisImage.overImage.src="images/"+thisImage.id+"_on.gif";//在其中添加overImage属性.
		thisImage.οnmοuseοver=function(){
			thisImage.src=thisImage.overImage.src;//鼠标在上上面,图片替换为新图片.
			}
	}

</script>
</head>
<body>
<a href="#"><img src="images/cat.gif" name="cat" width="247" height="192" id="cat" /></a>
<a href="#"><img src="images/dog.gif" name="cat" width="247" height="192" id="dog" /></a>
</body>
</html>