html:
<!doctype html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>title
[/span>style type="text/css"
.main{ Width＜/span>: 500px; Height＜/span>: 500px; border: red 1px solid; margin: 0 auto; text-align: center; }
.cover{margin: 10px auto;}
.btn{margin: 0 auto;padding: 2px 20px; border: red 1px solid; text-align: center; color: #000; cursor: pointer;}
[/span>body
[/span>div class="main box"
[/span>div class="cover"
[/span>img src="images/guagua-cover3.png" class="pictureOver" alt=""
[/span>div class="anniu"
[/span>span class="btn close"
[/span>span class="btn open"
[/span>script src=""
[/span>script src="js/Scratch.js"
[/span>script type="text/javascript"
/实例化方法/
var scratch = new Scratch({
canvasId: 'box',
close:".close",
open:".open",
cover:".cover",
cursor: {
x: '-20',
y: '-20'
},
radius: 20,
nPoints: 1000,
percent: 30,
pointSize: { x: 5, y: 5},
callback: function () {/刮刮之后的函数/
console.log("回调函数");
}
});
js:
var Scratch = (function () {
/
Merge properties between two objects
@param obj1
@param obj2
@returns { {}}
*/
function mergeOptions(obj1, obj2){
var obj3 = {}//代码效果参考：http://www.ezhiqi.com/bx/art_1445.html ;
for (var key in obj1) { obj3【key】 = obj1【key】; }
for (var key in obj2) { obj3【key】 = obj2【key】; }
return obj3;
}
/随机函数
Generate a random number
@param min
@param max
@returns {Number}
/
function randomPoint(min, max) {
var random = Math.abs(Math.random()(max - min) + min);
return random = parseInt(random.toFixed(0), 10);
}
/*
Scratch constructor
@param options
@constructor
/
var Scratch = function(options) {
this.cursor = {
png: '', // Modern browsers
cur: '', // for IE
x: 0,
y: 0,
default: 'auto'
};
this.pointSize = {
x: 5,
y: 5
};
this.defaults = {
canvasId: '', // Canvas id
open:"",
cover:"",
cursor: this.cursor, // Custom pointer
sceneWidth: 302, // Canvas Width＜/span>
sceneHeight: 60, // Canvas Height＜/span>
radius: 40, // Radius of scratch zone
nPoints: 10, // n points for clear canvas
pointSize: this.pointSize,
percent: null,
callback: null
};
this.options = mergeOptions(this.defaults, options); /此处使得可以直接获得this.options.canvasId/
this.options.cursor = mergeOptions(this.cursor, options.cursor);
this.options.pointSize = mergeOptions(this.pointSize, options.pointSize);
console.log(this.options.canvasId);
// init Scratch
this.init();
};
Scratch.prototype.init = function () {
var _this = this; // Save the "this" :)
console.log("初始化成功");
console.log(this.options.btn);
console.log(this.options.cover);
/打开/
$(this.options.open).click(function(){
_this.show();
});
/关闭*/
$(this.options.close).click(function(){
_this.hide();
});
};
//显示
Scratch.prototype.show = function() {
console.log("22");
$(this.options.cover).fadeIn(500);
this.options.callback();
};
//隐藏
Scratch.prototype.hide = function() {
$(this.options.cover).fadeOut(200);
this.callback(this.options.callback);
};
//回调
Scratch.prototype.callback = function(callback) {
if (callback != null this.percent >= this.options.percent) {
callback();
}
};
return Scratch;
})();
给心灵一个纯净空间，让思想，情感，飞扬！
