html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的封装</title> <style type="text/css"> .main{ width: 500px; height: 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;} </style> </head> <body> <div class="main box"> <div class="cover"> <img src="images/guagua-cover3.png" class="pictureOver" alt=""> </div> <div class="anniu"> <span class="btn close">关闭</span> <span class="btn open">打开</span> </div> </div> <script src="https://act.mcake.com/fangli/2019/wap/commonjs/jquery.min.js"></script> <script src="js/Scratch.js"></script> <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("回调函数"); } }); </script> </body> </html>
js:
var Scratch = (function () { /** * Merge properties between two objects * @param obj1 * @param obj2 * @returns {{}} */ function mergeOptions(obj1, obj2){ var obj3 = {}; 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 sceneHeight: 60, // Canvas height 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; })();
