JavaScript图片翻转

Posted 2020-09-20 newAdmin

<script type="text/javascript">
/**
 * 注册函数f，当文档加载问成时执行这个函数f
 * 如果文件已经载入完成，尽快以异步方式执行它
 */
function onLoad(f){
	if(onLoad.loaded)
		window.setTimeout(f,0);
	else if(window.addEventListener)
		window.addEventListener("load",f,false);
	else if(window.attachEvent)
		window.attachEvent("onload",f);
}
//给onLoad设置一个标志，用来指示文档是否载入完成
onLoad.loaded = false;
//注册一个函数，当文档载入完成时设置这个标志
onLoad(function(){onLoad.loaded = true;});

/**
 * 要创建图片翻转效果，将此模块引入到html文件中
 * 然后再任意<img>元素上使用data-rollover属性来指定翻转图片的URL即可
 * 如下所示：
 * 		<img src="normal.png" data-rollover="rollover_image.png">
 * 要注意的是，此模块依赖于 onLoad.js
 */
onLoad(function(){	//所有处理逻辑都在一个匿名函数中，不定义任何符号
	for(var i=0 ; i < document.images.length ; i++){
		var img = document.images[i];
		var rollover = img.getAttribute("data-rollover");
		if(!rollover)
			continue;
		//确保将翻转的图片缓存起来
		(new Image()).src = rollover;

		//定义一个属性来标识默认的图片和URL
		img.setAttribute("data-rollover",img.src);

		//注册事件处理函数来创建翻转效果
		img.onmouseover = function(){
			this.src = this.getAttribute("data-rollover");
		};
		img.onmouseout = function(){
			this.src = this.getAttribute("data-rollout");
		};
	}
});
</script>