【DOM操作】——仿刮刮奖
css代码：
ul {
list-style: none;
width: 400px;
height: 400px;
margin: 0;
padding: 0;
background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578277034957&di=0d81a23a303ba5b0b1c654948170e996&imgtype=jpg&src=http%3A%2F%2Fpic.soutu123.cn%2Felement_origin_min_pic%2F16%2F11%2F21%2F1bc94f2d441e30c0981604259cc484ba.jpg!%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue);
background-size: cover;
}
li {
width: 20px;
height: 20px;
float: left;
background-color:rgba(0, 0, 0, 1);
}
html代码：
<div></div>
<ul>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
<li img-data='1'></li>
</ul>
javascript代码：
var ul = document.getElementsByTagName('ul')[0];
ul.onmousemove = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "rgba(0, 0,0," + target.getAttribute('img-data') +")";
target.setAttribute('img-data', parseInt(target.getAttribute('img-data'))-0.3);
}
