您的位置：首页 > 其它

擦出图片

2015-12-15 20:08 239 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>擦出图片-sunshinegirl</title>
<style>
#oDiv{
width: 500px;
height: 500px;
position: relative;
top:60px;
background: #ccc;
}
#oDiv div{
width: 50px;
height: 50px;
border: 0px solid #ccc;
position: absolute;
left: 0;
top:0;
opacity: 0;
transition: 1s;
}
.addImg {
background-image: url(http://img1.gtimg.com/gamezone/pics/hv1/233/156/1962/127619063.jpg);
background-repeat:no-repeat;
}
input{
float: left;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
/*
getElementsByTagName()方法，动态特性
*/
window.onload = function (){
var oDiv = $("oDiv");

var aDiv = oDiv.getElementsByTagName("div"); // []

var str = "";
var color; //声明不赋值

var l = 0,t = 0;
for( var i = 0; i < 100; i++ ){
l = (i%10) * 50;
t = Math.floor( i/10 ) * 50;
str += "<div class='addImg' style='left:"+l+"px;top:"+t+"px;background-position:-"+l+"px -"+t+"px;'></div>";
};

oDiv.innerHTML = str;

for( var i = 0; i < aDiv.length; i++ ){
aDiv[i].onmouseover = function (){
this.style.opacity = 1;
};
};

};
</script>
</head>

<body>
<div id="oDiv"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航