html 里img图片被自动旋转,img图片自动旋转的问题

/**

* 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 element to specify the URL of(然后在任意的元素上使用data-rollover的属性来指定翻转的图片的URL即可)

* the rollover image. For example:(如下图所示)

*

*

*

* 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");

};

}

});