{"id":192,"date":"2014-05-24T14:40:27","date_gmt":"2014-05-24T06:40:27","guid":{"rendered":"http:\/\/weitaoc.com\/?p=192"},"modified":"2014-05-24T14:41:14","modified_gmt":"2014-05-24T06:41:14","slug":"javascript%e5%88%ae%e5%a5%96%e6%95%88%e6%9e%9cjquery%e5%9b%be%e7%89%87%e5%88%ae%e5%a5%96%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/weitaoc.com\/?p=192","title":{"rendered":"JavaScript\u522e\u5956\u6548\u679c(jquery\u56fe\u7247\u522e\u5956\u63d2\u4ef6)"},"content":{"rendered":"

\u539f\u6587\u51fa\u5904\uff1ahttp:\/\/www.codefans.net\/jscss\/code\/4593.shtml<\/a><\/p>\n

jquery.scratchie.js\u56fe\u7247\u522e\u5956\u63d2\u4ef6\u5b9e\u4f8b\u6f14\u793a\u4ee3\u7801\uff0c\u53ef\u5b9e\u73b0\u7c7b\u4f3c\u522e\u5956\u7684\u6548\u679c\uff0c\u522e\u522e\u4e50\u4e2d\u7684\u57fa\u672c\u6548\u679c\u3002\u5f15\u7528\u4e86google\u7684API\uff0cjquery\u7248\u672c1.4.4\uff0c\u9700\u8981\u51e0\u5f20\u56fe\u7247\u914d\u5408\uff0c\u5df2\u9644\u5728\u4ee3\u7801\u91cc\uff0c\u8fd0\u884c\u6548\u679c\u540e\u53f3\u952e–>\u56fe\u7247\u53e6\u5b58\u4e3a\u4e0b\u8f7d\u7d20\u6750\u56fe\u7247\u3002\u672c\u6548\u679c\u517c\u5bb9\u6027\u4e5f\u4e0d\u9519\uff0c\u53ef\u7528\u4e8e\u7f51\u9875\u522e\u5956\u6e38\u620f\u4e2d\u3002
\njQuery\u7c7b\u4f3c\u522e\u522e\u4e50\u7684\u56fe\u7247\u522e\u5956\u63d2\u4ef6jquery.scratchie.js<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<\/div><\/td>
<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"http:\/\/www.google.com\/jsapi"<\/span>><\/<\/span>script<\/span>><script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\/\/ <![CDATA[<\/span>
\ngoogle.load("jquery", "1.4.4");<\/span>
\n\/\/ ]]><\/span><\/<\/span>script<\/span>><script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\/\/ <![CDATA[<\/span>
\n
\n
\n\/\/\u4ee5\u4e0b\u4ee3\u7801\u539f\u578b\u4e3ajquery.scratchie.js  <\/span>
\n(function($){  <\/span>
\n    $.fn.scratchie = function(options) {  <\/span>
\n        var settings = {  <\/span>
\n            cursor: '\/jscss\/demoimg\/201310\/coin.gif',   <\/span>
\n            cursorHeight: 20,   <\/span>
\n            cursorWidth: 20,  <\/span>
\n            target : 'target',  <\/span>
\n            img : '\/jscss\/demoimg\/201310\/prize.jpg',  <\/span>
\n            imgHeight : 200,   <\/span>
\n            imgWidth : 400,  <\/span>
\n            title : 'Are you feeling lucky today?',   <\/span>
\n            fillColor : '#cc0000',   <\/span>
\n            fillImg : '\/jscss\/demoimg\/201310\/overlay.jpg',   <\/span>
\n            fillX : 20,   <\/span>
\n            fillY : 20,  <\/span>
\n            completion: 70,   <\/span>
\n            uncoverOnComplete : true,   <\/span>
\n            requireMouseClick : true,  <\/span>
\n            callback: function(){  <\/span>
\n                alert('Congratulations!');  <\/span>
\n            }  <\/span>
\n        };  <\/span>
\n        if(options){  <\/span>
\n            if(typeof options == 'object'){  <\/span>
\n                $.extend(settings, options);  <\/span>
\n            }else{  <\/span>
\n                settings.target = options;  <\/span>
\n            }  <\/span>
\n        }  <\/span>
\n        var mousedown = false;  <\/span>
\n        var ready = false;  <\/span>
\n        var overlaysTotal = overlaysUncovered = 0;  <\/span>
\n        var mouseUpAfterDrag = function(){  <\/span>
\n            $().one('mouseup', function(){  <\/span>
\n                mousedown = false;  <\/span>
\n                $().unbind();  <\/span>
\n                $('.scratch_overlay').bind('mousedown', mouseUpAfterDrag);  <\/span>
\n            });  <\/span>
\n            return false;  <\/span>
\n        }  <\/span>
\n        var mouseMove = function(e){  <\/span>
\n            $('#cursor').css({'left' : e.clientX - 2, 'top' : e.clientY + 2});  <\/span>
\n        }  <\/span>
\n        var mouseEnter = function(){  <\/span>
\n            $('#cursor').show();  <\/span>
\n            return false;  <\/span>
\n        }  <\/span>
\n        var mouseOut = function(){  <\/span>
\n            $('#cursor').hide();  <\/span>
\n            return false;  <\/span>
\n        }  <\/span>
\n        this.each(function (){  <\/span>
\n            var t, target, tp, ov, spritex, spritey;  <\/span>
\n            t = $(this);  <\/span>
\n            target = $('#' + settings.target);  <\/span>
\n            t.css({  <\/span>
\n                'cursor' : 'url(blank.cur), none',  <\/span>
\n                'height' : settings.imgHeight + 'px',  <\/span>
\n                'width' : settings.imgWidth + 'px'  <\/span>
\n            });  <\/span>
\n            target.attr({  <\/span>
\n                'alt' : settings.title,  <\/span>
\n                'title' : settings.title,  <\/span>
\n                'zIndex' : 1  <\/span>
\n            }).css({  <\/span>
\n                'height' : settings.imgHeight + 'px',  <\/span>
\n                'width' : settings.imgWidth + 'px',  <\/span>
\n            }).bind('mousedown', function(){  <\/span>
\n                return false;  <\/span>
\n            });  <\/span>
\n            tp = target.position();  <\/span>
\n            tt = tp.top;  <\/span>
\n            tl = tp.left;  <\/span>
\n            spritex = spritey = 0;  <\/span>
\n            t.after('<\/span>
\n
\n<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><\/span>
\n
\n');  <\/span>
\n            ov = '';  <\/span>
\n            for(i=0; i < settings.imgWidth; i += settings.fillX){  <\/span>
\n                for(j = 0; j < settings.imgHeight; j += settings.fillY){  <\/span>
\n                    ++overlaysTotal;  <\/span>
\n                    ov += '<\/span>
\n
\n<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 += '"\/><\/span>
\n';  <\/span>
\n                }  <\/span>
\n                if(settings.fillImg){  <\/span>
\n                    spritey = 0;  <\/span>
\n                    spritex += settings.fillX;  <\/span>
\n                }  <\/span>
\n            }  <\/span>
\n            t.after(ov);  <\/span>
\n            target.attr('src', settings.img);  <\/span>
\n            $('.scratch_overlay').css('cursor', 'url(blank.cur), none');  <\/span>
\n            target.bind('mouseout', function(){  <\/span>
\n                mouseOut();  <\/span>
\n            }).bind('mouseenter', function(){  <\/span>
\n                mouseEnter();  <\/span>
\n            }).bind('mousemove', function(e){  <\/span>
\n                mouseMove(e);  <\/span>
\n            });  <\/span>
\n            $('.scratch_overlay').bind('mouseout', function(){  <\/span>
\n                mouseOut();  <\/span>
\n            }).bind('mouseenter', function(){  <\/span>
\n                mouseEnter();  <\/span>
\n            }).bind('mousemove', function(e){  <\/span>
\n                mouseMove(e);  <\/span>
\n            });  <\/span>
\n            if(settings.requireMouseClick === true){  <\/span>
\n                    $('.scratch_overlay').bind('mousedown', function(){  <\/span>
\n                    mousedown = true;  <\/span>
\n                    \/\/ fix to recognize mouseup event after moving mouse  <\/span>
\n                    mouseUpAfterDrag();  <\/span>
\n                    if(ready === true){  <\/span>
\n                        ++overlaysUncovered;  <\/span>
\n                        $(this).remove();  <\/span>
\n                    }  <\/span>
\n                    return false;  <\/span>
\n                });  <\/span>
\n            }  <\/span>
\n            $('.scratch_overlay').bind('mouseover', function(){  <\/span>
\n                if(mousedown === true || settings.requireMouseClick === false){  <\/span>
\n                    if(ready === true){  <\/span>
\n                        ++overlaysUncovered;  <\/span>
\n                        $(this).remove();  <\/span>
\n                    }  <\/span>
\n                    if((overlaysUncovered \/ overlaysTotal) * 100 >= settings.completion){  <\/span>
\n                        if(settings.uncoverOnComplete === true){  <\/span>
\n                            $('.scratch_overlay').remove();  <\/span>
\n                        }  <\/span>
\n                        settings.callback();  <\/span>
\n                    }  <\/span>
\n                }  <\/span>
\n            });  <\/span>
\n            ready = true;  <\/span>
\n        });  <\/span>
\n    return this;  <\/span>
\n    };  <\/span>
\n})(jQuery);<\/span>
\n\/\/ ]]><\/span><\/<\/span>script<\/span>><\/span>
\n
\n<style<\/span> type<\/span>=<\/span>"text\/css"<\/span>><\/span><!--<\/span>
\nbody{font-size: 11px;font-family:Verdana, Geneva, sans-serif;}<\/span>
\na{color:#FF9900;text-decoration: none;}<\/span>
\na:hover, a:active{background:#FF9900;color:#eee;}<\/span>
\nimg{border:0;}<\/span>
\n#container{width: 640px;margin: 40px auto 0;position:relative;}<\/span>
\n#content{width: 640px;margin-top: 20px;}<\/span>
\npre{border:1px dashed #222;padding:4px;}<\/span>
\n--><\/span><\/<\/span>style<\/span>><script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\/\/ <![CDATA[<\/span>
\n
\n
\n$(document).ready(function(){  <\/span>
\n    $('#raspadinha').scratchie({  <\/span>
\n        target : 'target',  <\/span>
\n        img : '\/jscss\/demoimg\/201310\/prize.jpg',  <\/span>
\n        imgHeight : 200,   <\/span>
\n        imgWidth : 400,  <\/span>
\n        title : 'Try your luck!',  <\/span>
\n        fillImg : '\/jscss\/demoimg\/201310\/overlay.jpg',  <\/span>
\n        requireMouseClick : true,  <\/span>
\n        callback: function(){  <\/span>
\n            alert('Congratulations!');  <\/span>
\n        }  <\/span>
\n    });  <\/span>
\n    $('#lang_pt').click(function(){  <\/span>
\n        $('.en').fadeOut(function(){  <\/span>
\n            $('.pt').show();  <\/span>
\n        });  <\/span>
\n    });  <\/span>
\n    $('#lang_en').click(function(){  <\/span>
\n        $('.pt').fadeOut(function(){  <\/span>
\n            $('.en').show();  <\/span>
\n        });  <\/span>
\n    });   <\/span>
\n});  <\/span>
\n$(window).load(function(){  <\/span>
\n    setTimeout(function(){  <\/span>
\n        $('#aw').slideDown(320);  <\/span>
\n    }, 1150);     <\/span>
\n});<\/span>
\n\/\/ ]]><\/span><\/<\/span>script<\/span>><\/span>
\n<div<\/span> id<\/span>=<\/span>"container"<\/span>><\/span>
\n<div<\/span> id<\/span>=<\/span>"content"<\/span>><\/span>
\n<div<\/span> id<\/span>=<\/span>"raspadinha"<\/span>><img<\/span> id<\/span>=<\/span>"target"<\/span> alt<\/span>=<\/span>""<\/span> \/<\/span>><\/<\/span>div<\/span>><\/span>
\n<!-- raspadinha --><\/span>
\n
\n<\/<\/span>div<\/span>><\/span>
\n<!--content--><\/span>
\n
\n<\/<\/span>div<\/span>><\/span>
\n<!--container--><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
\"js\"<\/a>

js<\/p><\/div>\n

\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a\u8ff7\u8def\u7684\u8001\u9f20<\/a> » JavaScript\u522e\u5956\u6548\u679c(jquery\u56fe\u7247\u522e\u5956\u63d2\u4ef6)<\/a><\/p>","protected":false},"excerpt":{"rendered":"

\u539f\u6587\u51fa\u5904\uff1ahttp:\/\/www.codefans.net\/jscss\/code\/4593.shtml jquery.scratchie.js\u56fe\u7247\u522e\u5956\u63d2\u4ef6\u5b9e\u4f8b\u6f14\u793a\u4ee3\u7801\uff0c\u53ef\u5b9e\u73b0\u7c7b\u4f3c\u522e\u5956\u7684\u6548\u679c\uff0c\u522e\u522e\u4e50\u4e2d\u7684\u57fa\u672c\u6548\u679c\u3002\u5f15\u7528\u4e86google\u7684API\uff0cjquery\u7248 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[15],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-js"],"views":7606,"_links":{"self":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=192"}],"version-history":[{"count":0,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/192\/revisions"}],"wp:attachment":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}