优雅的实现图片翻转（js实现）

/**
* rollover.js: unobtrusive image rollovers.（优雅的实现代码翻转）
*
* To create image rollovers, include this module in your HTML file and（要创建图片翻转效果，将这个模块引用到你的html文件中）
* use the data-rollover attribute on any <img> element to specify the URL of（然后在任意的<img>元素上使用data-rollover的属性来指定翻转的图片的URL即可）
* the rollover image. For example:（如下图所示）
*
*   <img src="normal_image.png" data-rollover="rollover_image.png">
*
* Note that this module requires onLoad.js（注意的是，这个效果依赖于onLoad.js）
*/
onLoad(function() { // Everything in one anonymous function: no symbols defined
//所有的处理逻辑都在一个匿名函数中：不定义任何的符号；
//遍历所有的图片，查找data-rollover属性；
// Loop through all images, looking for the data-rollover attribute
for(var i = 0; i < document.images.length; i++) {
var img = document.images[i];
var rollover = img.getAttribute("data-rollover");
if (!rollover) continue;  // Skip images without data-rollover
//跳过没有data-rollover属性的图片
//确定将翻转的图片缓存起来
// Ensure that the rollover image is in the cache
(new Image()).src = rollover;
//定义一个属性来标识默认的图片URL
// Define an attribute to remember the default image URL
img.setAttribute("data-rollout", img.src);
//注册事件处理函数来创建翻转效果
// Register the event handlers that create the rollover effect
img.onmouseover = function() {
this.src = this.getAttribute("data-rollover");
};
img.onmouseout = function() {
this.src = this.getAttribute("data-rollout");
};
}
});