JavaScript刮奖效果(jquery图片刮奖插件)

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<title>jQuery类似刮刮乐的图片刮奖插件jquery.scratchie.js</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.4");</script>
<script type="text/javascript">
//以下代码原型为jquery.scratchie.js
(function($){
    $.fn.scratchie = function(options) {
        var settings = {
        	cursor: '//ku.shouce.ren/files/images/201601/56a3692ad2afb.gif', 
        	cursorHeight: 20, 
        	cursorWidth: 20,
        	target : 'target',
            img : '//ku.shouce.ren/files/images/201601/56a3692bb23e6.jpg',
            imgHeight : 200, 
            imgWidth : 400,
            title : 'Are you feeling lucky today?', 
            fillColor : '#cc0000', 
            fillImg : '//ku.shouce.ren/files/images/201601/56a3692d02ef4.jpg', 
            fillX : 20, 
            fillY : 20,
            completion: 70, 
            uncoverOnComplete : true, 
            requireMouseClick : true,
            callback: function(){
            	alert('Congratulations!');
            }
        };
        if(options){
            if(typeof options == 'object'){
                $.extend(settings, options);
            }else{
                settings.target = options;
            }
        }
		var mousedown = false;
		var ready = false;
		var overlaysTotal = overlaysUncovered = 0;
		var mouseUpAfterDrag = function(){
			$().one('mouseup', function(){
				mousedown = false;
				$().unbind();
				$('.scratch_overlay').bind('mousedown', mouseUpAfterDrag);
			});
			return false;
		}
		var mouseMove = function(e){
			$('#cursor').css({'left' : e.clientX - 2, 'top' : e.clientY + 2});
		}
		var mouseEnter = function(){
			$('#cursor').show();
			return false;
		}
		var mouseOut = function(){
			$('#cursor').hide();
			return false;
		}
        this.each(function (){
        	var t, target, tp, ov, spritex, spritey;
        	t = $(this);
        	target = $('#' + settings.target);
        	t.css({
        		'cursor' : 'url(blank.cur), none',
        		'height' : settings.imgHeight + 'px',
        		'width' : settings.imgWidth + 'px'
    		});
			target.attr({
				'alt' : settings.title,
				'title' : settings.title,
				'zIndex' : 1
			}).css({
				'height' : settings.imgHeight + 'px',
				'width' : settings.imgWidth + 'px',
			}).bind('mousedown', function(){
				return false;
			});
        	tp = target.position();
        	tt = tp.top;
        	tl = tp.left;
        	spritex = spritey = 0;
        	t.after('<div id="cursor" style="cursor:none;width:' + settings.cursorWidth + 'px;height:' + settings.cursorHeight + 'px;position:fixed;display:none;top:0;left:0;z-index:10000;background:url(' + settings.cursor + ') top left no-repeat;"></div>');
        	ov = '';
        	for(i=0; i < settings.imgWidth; i += settings.fillX){
        		for(j = 0; j < settings.imgHeight; j += settings.fillY){
        			++overlaysTotal;
        			ov += '<div class="scratch_overlay" style="z-index:100;height:' + settings.fillY + 'px;width:' + settings.fillX + 'px;position:absolute;border:0;overflow:hidden;top:' + (tt + j) + 'px;left:' + (tl + i) + 'px;background:';
        			if(settings.fillImg){
        				ov += ' transparent url(' + settings.fillImg + ') -' + spritex + 'px -' + spritey + 'px no-repeat;';
	        			spritey += settings.fillY;
        			}else{
        				ov += settings.fillColor;
        			}
        			ov += '"/>';
        		}
        		if(settings.fillImg){
		    		spritey = 0;
		    		spritex += settings.fillX;
		    	}
        	}
			t.after(ov);
        	target.attr('src', settings.img);
        	$('.scratch_overlay').css('cursor', 'url(blank.cur), none');
			target.bind('mouseout', function(){
				mouseOut();
			}).bind('mouseenter', function(){
				mouseEnter();
			}).bind('mousemove', function(e){
				mouseMove(e);
			});
			$('.scratch_overlay').bind('mouseout', function(){
				mouseOut();
			}).bind('mouseenter', function(){
				mouseEnter();
			}).bind('mousemove', function(e){
				mouseMove(e);
			});
			if(settings.requireMouseClick === true){
					$('.scratch_overlay').bind('mousedown', function(){
					mousedown = true;
					// fix to recognize mouseup event after moving mouse
					mouseUpAfterDrag();
					if(ready === true){
						++overlaysUncovered;
						$(this).remove();
					}
					return false;
				});
			}
			$('.scratch_overlay').bind('mouseover', function(){
				if(mousedown === true || settings.requireMouseClick === false){
					if(ready === true){
						++overlaysUncovered;
						$(this).remove();
					}
					if((overlaysUncovered / overlaysTotal) * 100 >= settings.completion){
						if(settings.uncoverOnComplete === true){
							$('.scratch_overlay').remove();
						}
						settings.callback();
					}
				}
			});
			ready = true;
        });
    return this;
	};
})(jQuery);
</script>
<style type="text/css">
body{font-size: 11px;font-family:Verdana, Geneva, sans-serif;}
a{color:#FF9900;text-decoration: none;}
a:hover, a:active{background:#FF9900;color:#eee;}
img{border:0;}
#container{width: 640px;margin: 40px auto 0;position:relative;}
#content{width: 640px;margin-top: 20px;}
pre{border:1px dashed #222;padding:4px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#raspadinha').scratchie({
    	target : 'target',
        img : '//ku.shouce.ren/files/images/201601/56a3692bb23e6.jpg',
        imgHeight : 200, 
        imgWidth : 400,
        title : 'Try your luck!',
        fillImg : '//ku.shouce.ren/files/images/201601/56a3692d02ef4.jpg',
        requireMouseClick : true,
        callback: function(){
        	alert('Congratulations!');
        }
	});
	$('#lang_pt').click(function(){
		$('.en').fadeOut(function(){
			$('.pt').show();
		});
	});
	$('#lang_en').click(function(){
		$('.pt').fadeOut(function(){
			$('.en').show();
		});
	});	
});
$(window).load(function(){
	setTimeout(function(){
		$('#aw').slideDown(320);
	}, 1150);	
});
</script>
</head>
<body>
<div id="container">
<div id="content">
<div id="raspadinha">
<img id="target" />
</div>
</div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript刮奖效果(jquery图片刮奖插件)

分类

jQuery实例

描述

jquery.scratchie.js图片刮奖插件实例演示代码，可实现类似刮奖的效果，刮刮乐中的基本效果。引用了google的API，jquery版本1.4.4，需要几张图片配合，已附在代码里，运行效果后右键-->图片另存为下载素材图片。本效果兼容性也不错，可用...