<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>