代码可能有点不合理,
<html>
<head>
<meta charest="utf-8">
<title>图片擦除效果</title>
<style>
*{margin:0; padding: 0;}
#content { background: url(image/img2.jpg) no-repeat; width: 500; height: 500px; position: relative; margin: 40px auto;}
#f_bg {width: 500; height: 500px; position: absolute; top:0; left: 0;}
li { display: block; width: 25px; height: 25px; background: #f1f1f1;position: absolute; top:0; left: 0;}
</style>
<script>
window.onload=function()
{
var oContent=document.getElementById('content');
var oList=document.getElementById('list');
var aLi=oList.getElementsByTagName('li');
var str='';
for(var i=0;i<400;i++)
{
str +="<li></li>";
}
oList.innerHTML=str;
for(var i=0;i<400;i++)
{
aLi[i].style.left=i%20*25 +'px';
aLi[i].style.top=(parseInt(i/20))*25 + 'px';
}
//aLi[1].style.display="none";
for(var i=0; i<400;i++)
{
aLi[i].onmouseover=(function(i){
return function(){
aLi[i].style.display="none";
}
}(i));
}
}
</script>
</head>
<body>
<div id="content">
<div id="f_bg"></div>
<ul id="list">
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charest="utf-8">
<title>图片擦除效果</title>
<style>
*{margin:0; padding: 0;}
#content { background: url(image/img2.jpg) no-repeat; width: 500; height: 500px; position: relative; margin: 40px auto;}
#f_bg {width: 500; height: 500px; position: absolute; top:0; left: 0;}
li { display: block; width: 25px; height: 25px; background: #f1f1f1;position: absolute; top:0; left: 0;}
</style>
<script>
window.onload=function()
{
var oContent=document.getElementById('content');
var oList=document.getElementById('list');
var aLi=oList.getElementsByTagName('li');
var str='';
for(var i=0;i<400;i++)
{
str +="<li></li>";
}
oList.innerHTML=str;
for(var i=0;i<400;i++)
{
aLi[i].style.left=i%20*25 +'px';
aLi[i].style.top=(parseInt(i/20))*25 + 'px';
}
//aLi[1].style.display="none";
for(var i=0; i<400;i++)
{
aLi[i].onmouseover=(function(i){
return function(){
aLi[i].style.display="none";
}
}(i));
}
}
</script>
</head>
<body>
<div id="content">
<div id="f_bg"></div>
<ul id="list">
</ul>
</div>
</body>
</html>
