您的位置：首页 > Web前端 > JQuery

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

2014-01-04 10:12 337 查看

原文出处：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航