码迷,mamicode.com
首页 > 其他好文 > 详细

小案例之刮奖

时间:2019-09-13 17:11:43      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:for   rip   oat   aci   new   margin   pre   java   col   

<!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;
			btn1.onclick=function(){
				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
				that.res();
				
			}
			btn2.onclick=function(){
				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
				that.display();
				
			}
			btn3.onclick=function(){
				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
				that.look();
				
			}
		}
		//重置
		Play.prototype.res=function(){
			for(var i=0;i<this.div1.length;i++){
			this.div1[i].remove();	
			}
			
		}
		//刮奖
		Play.prototype.display=function(){
			this.cover();
			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>

  效果图

技术图片

 

 技术图片

 

 

 

  

小案例之刮奖

标签:for   rip   oat   aci   new   margin   pre   java   col   

原文地址:https://www.cnblogs.com/xiaomala/p/11516920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!