橡皮檫

HTML

<div id="box"></div>

CSS

*{
	margin: 0;
	padding: 0;
}
#box{
	width: 600px;
	height: 400px;
	position: relative;
	margin: 50px auto 0;
}
#box div{
	width: 50px;
	height: 50px;
	background: #ccc;
	border: 1px solid #ccc;
	position: absolute;
}
#box .act{
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510726585986&di=87a0207b1eea39f7538f98a17a21337c&imgtype=0&src=http%3A%2F%2Fimg3.pplock.com%2Fuploads%2F2013%2F07%2F16%2Fdreamlyn.jpg) no-repeat;
}

JS

var oBox=document.getElementById("box");
//生成div
for (var i=0;i<96;i++) {
	oBox.innerHTML+="<div style='left: "+i%12*51+"px;top:"+Math.floor(i/12)*51+"px;background-position:"+-i%12*51+"px "+-Math.floor(i/12)*50+"px;'></div>";
}
//鼠标移入
var aDiv=oBox.getElementsByTagName("div");
for (var i=0;i<aDiv.length;i++) {
	aDiv[i].index=i;
	aDiv[i].onmouseover=function(){
		this.className="act";
	}
}