<!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>
