Jquery刮刮卡 例子完整源码下载

【实例截图】

【核心代码】

var gua = 1,re = 2;  // 可设置刮奖次数
var imgSrc = 'img/aa.png';

function showdiv() { 
	 document.getElementById("bg1").style.display ="block";
	 document.getElementById("show").style.display ="block";
}

function hidediv() {
	 document.getElementById("bg1").style.display ='none';
	 document.getElementById("show").style.display ='none';
}

$(function(){
	var width = $("#show_img").width();
	var height = $("#show_img").height();
	var winheight=$(window).height();
	var winwidth=$(window).width();
	$("#show").css({"width":300 "px","height":160 "px","overflow":"hidden"});
	$("#show_btn").css({"width":176*0.5 "px","height":76*0.5 "px"});
	$("#gua_div").html("x" gua);
	$("#re_div").html("x" re);
	
	if(gua == 0){
		showdiv();
	}
})

$("img").load(function(){
	var body_width = $(window).width();
	var body_height = $(window).height();
	$("#gua1_img").width(300).height(160);
	var height = 141;
	var width  = 285;
	var bg2_width = $("#bg2_img").width();
	var bg2_height = $("#bg2_img").height();
	
	$("#gua1").css({"margin-top":"20px"});

	$("#notify").css({"margin-top":"200px"});
	$("#nImg").width(300).height(101);
	
	$("#di").css({"margin-top":"50px"});
	$("#di_img").width(414*0.7).height(24*0.7);


	$("#gua").width(width/10).height(width/10);
	$("#gua_div").css({"line-height":width/10 "px","width":width/10 "px","height":width/10 "px","margin-top":"-" ($("#gua").height()) "px","margin-left":$("#gua").height() 5 "px","font-size": $("#gua").height()/1.6 "px"});
	$("#re").width(width/10).height(width/10);
	$("#re_div").css({ "line-height":width/10 "px","width":width/10 "px","height":width/10 "px","margin-top":"-" ($("#gua").height()) "px","margin-left":$("#gua").height() 5 "px","font-size": $("#gua").height()/1.6 "px"});
	var gua1_img_width = $("#gua1_img").width();
	$("#front").css({"margin-top":9.3 "px","margin-left":7.5 "px"});
	if(gua > 0){
		bodys(height,width);
	}
});
function bodys(height,width){
	var img = new Image();         
	var canvas = document.querySelector('canvas');         
	canvas.style.position = 'absolute';           
	img.addEventListener('load',function(e){  
		var ctx;
		var w = width, h = height;             
		var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;             
		var mousedown = false;               
		function layer(ctx){                 
			ctx.fillStyle = 'gray';                 
			ctx.fillRect(0, 0, w, h);             
		}   
		function eventDown(e){                 
			e.preventDefault();                 
			mousedown=true;             
		}   
		function eventUp(e){            
			e.preventDefault();                 
			mousedown=false;             
		}               
		function eventMove(e){                 
			e.preventDefault();                 
			if(mousedown){                     
				if(e.changedTouches){                         
					e=e.changedTouches[e.changedTouches.length-1];                     
				}                     
				var x = (e.clientX   document.body.scrollLeft || e.pageX) - offsetX || 0,                         
				y = (e.clientY   document.body.scrollTop || e.pageY) - offsetY || 0;                     
				with(ctx){                    
					beginPath()                     
					arc(x, y, 15, 0, Math.PI * 2);                         
					fill();                     
				}                
			}             
		}               
		canvas.width=w;             
		canvas.height=h; 
		
		canvas.style.backgroundImage='url(' img.src ')';              
		ctx=canvas.getContext('2d');         
		ctx.fillStyle='b9b9b9';             
		ctx.fillRect(0, 0, w, h);

		layer(ctx);               
		ctx.globalCompositeOperation = 'destination-out';               
		canvas.addEventListener('touchstart', eventDown);             
		canvas.addEventListener('touchend', eventUp);             
		canvas.addEventListener('touchmove', eventMove);             
		canvas.addEventListener('mousedown', eventDown);             
		canvas.addEventListener('mouseup', eventUp);             
		canvas.addEventListener('mousemove', eventMove);       
	});
	
	img.src = imgSrc;
	(document.body.style);
}