使用js数组和事件完成的一个小玩意儿

图片开始半透明的

鼠标放上去后

代码实现

*{
margin: 0;
padding: 0;
}
.dage{
width: 510px;
height: 510px;
background: #ccc;
margin: 20px auto;
position: relative;
}
span{
height: 50px;
width: 50px;
background-image: url("img/pic.jpg") ;
display: block;
position: absolute;
opacity: 0.2;

}

<div class="dage">

</div>

var oDiv = document.getElementsByTagName("div")[0];
var str = "";
for(var i=0; i<100; i++){
str += "<span></span>";
}
oDiv.innerHTML =str;

var oSpan = document.getElementsByTagName("span");
for(var i=0; i<oSpan.length; i++){
oSpan[i].style.top = parseInt(i/10)*51+"px";
oSpan[i].style.left =  (i%10)*51+"px";
oSpan[i].style.backgroundPosition =(i%10)*-51+"px"+' '+parseInt(i/10)*-51+"px";
oSpan[i].onmouseover = function(){
this.style.opacity = "1";
}

}