您的位置：首页 > Web前端 > JavaScript

优雅的图片翻转实现方式rollover.js

2016-05-04 16:30 459 查看

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
img{
width:100px;
height:100px;
background: lightcoral;
display: inline-block;
margin-right:15px;

}
</style>
<img data-rollover="img/1.jpg"/>
<img data-rollover="img/2.jpg"/>
<img data-rollover="img/3.jpg"/>
<script src="js/rollover.js"></script>
</body>
</html>

window.onload=function(){
var i = 0;
for (i;i<document.images.length;i++) {
var img = document.images[i];
var src =img.getAttribute('data-rollover');
if(!src){
continue;
}
(new Image()).src = src;
img.setAttribute('data-rollout',img.src);
img.onmouseover=function(){
this.src = this.getAttribute('data-rollover');
};
img.onmouseout=function(){
this.src = this.getAttribute('data-rollout');
};
}
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航