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

最新推荐文章于 2022-11-11 15:07:31 发布
最新推荐文章于 2022-11-11 15:07:31 发布
阅读量7.4k 收藏
点赞数
分类专栏： HTML5 微信 JavaScript CSS
JavaScript 同时被 3 个专栏收录
311 篇文章 3 订阅
订阅专栏
CSS
191 篇文章 0 订阅
订阅专栏
HTML5
155 篇文章 0 订阅
订阅专栏
原文出处： http://www.codefans.net/jscss/code/4593.shtml
jquery.scratchie.js图片刮奖插件实例演示代码，可实现类似刮奖的效果，刮刮乐中的基本效果。引用了google的API，jquery版本1.4.4，需要几张图片配合，已附在代码里，运行效果后右键-->图片另存为下载素材图片。本效果兼容性也不错，可用于网页刮奖游戏中。
 
<!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: '/jscss/demoimg/201310/coin.gif', 
        	cursorHeight: 20, 
        	cursorWidth: 20,
        	target : 'target',
            img : '/jscss/demoimg/201310/prize.jpg',
            imgHeight : 200, 
            imgWidth : 400,
            title : 'Are you feeling lucky today?', 
            fillColor : '#cc0000', 
            fillImg : '/jscss/demoimg/201310/overlay.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 : '/jscss/demoimg/201310/prize.jpg',
        imgHeight : 200, 
        imgWidth : 400,
        title : 'Try your luck!',
        fillImg : '/jscss/demoimg/201310/overlay.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><!-- raspadinha -->
</div><!--content-->
</div><!--container-->
</body>
</html>



chelen_jak
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript刮刮乐插件
08-24
js做的一个刮刮乐的工具,可以自定义刮开百分比进行下一步操作 文案皆可以自定义,文件是utf-8编码 需要gbk的小伙伴请自行转换(推荐用editplus)
手机端刮奖效果jquery插件（完整）
09-29
一款采用jquery插件写的手机端刮奖特效代码。效果不错，手机端如果需要做刮奖活动，可以用，代码完整。
微信小程序----canvas实现刮刮乐效果
liNewman的博客
03-06 2384
微信小程序----canvas实现刮刮乐效果 效果图 设计流程 设计思路 canvas设置背景图，作为中奖图片； 在canvas上绘制刮的灰色涂层； 通过绑定的事件，清除对应区域的涂层； 最后判断涂层清除区域是否超过设置的可见百分比，如果超过则全部涂层清除，否则不清楚。 ...
H5新特新--canvas之刮刮乐案例
小白小白从不日别的博客
07-17 799
原理及思路分析： 首先在“刮刮乐”的底层放置两张图片，一张是中奖的、一张是没中的，然后利用随机数给定一个中奖率。例如，当达到百分之多少时，即为中奖，那么此时就应该显示中奖的那张图片，反之显示未中奖的图片 然后利用canvas给图片增加一个遮罩层，以此来模拟现实中的刮奖效果 再者利用鼠标的按下事件、移动事件以及抬起事件，当鼠标按下并移动时，则利用canvas的擦除也就是clearRect()来进行模拟 最后为了防止当鼠标抬起时，在屏幕上滑动也能实现“刮奖”效果，在这里我们需要清除，也就是当鼠标抬起时，
jquery实现擦除效果
郝云博客
07-25 4110
效果展示： 代码实现： 刮刮卡 Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag. var w = 800; var h = 80; var moused
jQuery刮彩票兑奖效果
u011927449的博客
07-08 214
效果体验：http://keleyi.com/a/bjad/uaq24pxt.htm其中拖拽刮涂层效果使用jquery UI的draggable方法，请参考：http://keleyi.com/a/bjac/9dd21532ed1dbf23.htm以下是源代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
简单的抽奖刮刮乐
04-01 487
简单的抽奖刮刮乐实现Demo
cocos creator + TypeScript 实现刮刮乐效果
对酒当歌﹏✍
05-08 3705
目录1、引言2、场景搭建3、代码部分4、效果展示5、Demo下载6、结束语 1、引言   这里分享一个刮刮卡效果，闲言少叙，我们直接上代码。 2、场景搭建   场景搭建如图所示： 3、代码部分   详细代码如下所示： const {ccclass, property} = cc._decorator; @ccclass export default class test extends cc...
前端实现刮刮乐效果
11-11 1131
canvas实现刮刮乐效果
手机端刮奖效果jquery.eraser.js插件.zip
最新发布
09-21
手机端刮奖效果jquery.eraser.js插件.zip
jquery+H5实现刮刮乐抽奖特效
01-07
jquery+H5实现刮刮乐抽奖特效,jquery+H5实现刮刮乐抽奖特效,jquery+H5实现刮刮乐抽奖特效,jquery+H5实现刮刮乐抽奖特效,
android刮奖效果
05-08
实现了基本的刮奖效果，并且进行了一定的封装，拷贝其中的类即可使用。
利用HTML5的画布Canvas实现刮刮卡效果
11-25
先给大家展示效果： 查看演示   源码下载 你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。 我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。 HTML 我们只需要在页面中加入canvas标签元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，运行在支持HTML5的现
2种jQuery 实现刮刮卡效果
10-24
主要介绍了2种jQuery 实现刮刮卡效果,需要的朋友可以参考下
jQuery手机端刮奖效果代码.zip
07-11
代码简介：jQuery手机端刮奖效果代码是一款采用jquery.eraser.js插件写的手机端刮奖特效。
jQuery手机端刮奖效果代码
06-24
jQuery手机端刮奖效果代码是一款采用jquery.eraser.js插件写的手机端刮奖特效。
刮刮乐demo
llf_cloud的博客
07-11 117
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习刮刮乐<
html刮刮乐百分比,jQuery+html5实现彩票刮刮乐效果
weixin_39572442的博客
06-21 357
我们运用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后借助测试用户鼠标移到和手势来描绘一个透明的图形，这样才能看见Canvas背景下的真实照片html5 canvas 刮刮乐，就达到刮刮卡效果。分类：手机特效> canvas难易：中级程序员，你不是一个人；网站开发QQ群：642228541，充值，或联系QQ321037704直接充值查看演示下载资...
html5刮奖效果,HTML5 Canvas实战之刮奖效果
weixin_32676101的博客
06-03 490
近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。1、效果2、原理原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面。当在第二个canvas上点...
vue3 实现刮奖效果
04-27
要实现刮奖效果，可以使用 Vue3 中的 `<canvas>` 标签来绘制刮奖区域和遮罩层，然后通过监听用户的鼠标或手指移动事件来擦除遮罩层，从而实现刮奖效果。 下面是一个简单的实现示例： ```vue <template> <div class="scratch-card"> <canvas ref="canvas" class="scratch-card__canvas"></canvas> </div> </template> <script> import { onMounted, onUnmounted, ref } from 'vue'; export default { name: 'ScratchCard', setup() { const canvasRef = ref(null); let ctx = null; let isDrawing = false; const handleStart = (e) => { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); }; const handleMove = (e) => { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; const handleEnd = () => { isDrawing = false; }; onMounted(() => { const canvas = canvasRef.value; ctx = canvas.getContext('2d'); // 绘制刮奖区域 ctx.fillStyle = '#888'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制遮罩层 ctx.fillStyle = '#f00'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 监听鼠标或手指移动事件 canvas.addEventListener('mousedown', handleStart); canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mouseup', handleEnd); canvas.addEventListener('touchstart', handleStart); canvas.addEventListener('touchmove', handleMove); canvas.addEventListener('touchend', handleEnd); }); onUnmounted(() => { const canvas = canvasRef.value; canvas.removeEventListener('mousedown', handleStart); canvas.removeEventListener('mousemove', handleMove); canvas.removeEventListener('mouseup', handleEnd); canvas.removeEventListener('touchstart', handleStart); canvas.removeEventListener('touchmove', handleMove); canvas.removeEventListener('touchend', handleEnd); }); return { canvasRef, }; }, }; </script> <style scoped> .scratch-card { position: relative; width: 300px; height: 200px; } .scratch-card__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 在这个示例中，我们使用 `<canvas>` 标签来创建一个刮奖区域，它的背景颜色是灰色的。然后，我们使用相同的大小和位置创建一个遮罩层，它的背景颜色是红色的。 在 `setup` 函数中，我们使用 `onMounted` 和 `onUnmounted` 生命周期钩子来监听鼠标或手指移动事件，并在事件处理程序中绘制用户的刮奖轨迹。我们还使用 `ref` 函数来创建一个引用，以便在模板中访问 `<canvas>` 元素。 最后，我们将组件的样式设置为相对定位，以便它的子元素（即 `<canvas>` 元素）可以使用绝对定位来覆盖它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值