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

来源：互联网发布：斗鱼妃凌雪淘宝店编辑：程序博客网时间：2024/04/27 20:52
原文出处：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 mousemouseUpAfterDrag();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>
0 1