<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #dv{ width: 400px; height: 50px; margin: 20px auto; } #box{ width: 400px; height: 300px; margin: 20px auto; background: url(img/img1.jpg); background-size:400px 300px ; position: relative; } #box img{ width: 400px; height: 300px; } .cls{ width: 10px; height: 10px; float: left; background-color: #ccc; } </style> </head> <body> <div id="dv"> <input type="button" value="重置" id="btn1"/> <input type="button" value="刮奖" id="btn2"/> <input type="button" value="偷窥" id="btn3"/> </div> <div id="box"> </div> </body> <script> function Play(){ this.btn1=document.getElementById("#btn1"); this.btn2=document.getElementById("#btn2"); this.btn3=document.getElementById("#btn3"); this.img=document.querySelector("#box img"); this.box=document.querySelector("#box"); this.init(); } Play.prototype.init=function(){ var that=this; = function btn1.onclick () { } that.box.innerHTML = ""; // click of a button when you want to empty box inside the data, otherwise there will be many times more click on the shaded area that.res (); } btn2.onclick = function () { that.box .innerHTML = ""; // click of a button when you want to empty box inside the data, otherwise there will be many times more click on the shaded area that.display (); } btn3.onclick = function () { that.box.innerHTML = ""; // click of a button when you want to empty box inside the data, or click several times more shadow areas appear that.look (); } } // reset Play.prototype.res = function () { for ( I = 0 var; I <this.div1.length; I ++) { this.div1 [I] .remove (); } } // scratch Play.prototype.display = function () { this.cover (); the this .move (); Play.prototype.cover = function () { for(var i=0;i<40;i++){ this.div=document.createElement("div"); this.div.className="cls"; this.box.appendChild(this.div); this.div.style.opacity="1"; for(var j=0;j<30;j++){ this.div=document.createElement("div"); this.div.className="cls"; this.box.appendChild(this.div); this.div.style.opacity="1"; } } this.div1=document.querySelectorAll(".cls"); } Play.prototype.move=function(){ var that=this; for(var i=0;i<this.div1.length;i++){ this.div1[i].index=i; this.div1[i].onmousemove=function(){ that.div1[this.index].style.opacity="0"; } } } //偷窥 Play.prototype.look=function(eve){ this.cover(); this.lookat(); } Play.prototype.lookat=function(){ // this.div1=document.querySelectorAll(".cls"); var that=this; for(var i=0;i<this.div1.length;i++){ this.div1[i].index=i; this.div1[i].onmouseover=function(){ that.div1[this.index].style.opacity="0"; } this.div1[i].onmouseout=function(){ that.div1[this.index].style.opacity="1"; } } } new Play(); </script> </html>
Renderings