JavaScript刮獎效果(jquery圖片刮獎外掛)
阿新 • • 發佈：2019-02-03
原文出處：http://www.codefans.net/jscss/code/4593.shtml
jquery.scratchie.js圖片刮獎外掛例項演示程式碼，可實現類似刮獎的效果，刮刮樂中的基本效果。引用了google的API，jquery版本1.4.4，需要幾張圖片配合，已附在程式碼裡，執行效果後右鍵-->圖片另存為下載素材圖片。本效果相容性也不錯，可用於網頁刮獎遊戲中。
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>