首页 > 代码库 > JavaScript图片翻转

JavaScript图片翻转

<script type="text/javascript">
/**
 * 注册函数f,当文档加载问成时执行这个函数f
 * 如果文件已经载入完成,尽快以异步方式执行它
 */
function onl oad(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="http://www.mamicode.com/normal.png" data-rollover="rollover_image.png">
 * 要注意的是,此模块依赖于 onl oad.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 = http://www.mamicode.com/rollover;"data-rollover",img.src);

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

  

JavaScript图片翻转