详尽分享组件的封装方法【比较高级方法】★★★★★★★

简介: 详尽分享组件的封装方法【比较高级方法】★★★★★★★

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;

})();

给心灵一个纯净空间,让思想,情感,飞扬!

目录
打赏
0
0
0
0
95
分享
相关文章
统一内存统一内存的基本概念和使用
统一内存统一内存的基本概念和使用
2082 0
统一内存统一内存的基本概念和使用
PTA—C语言期末复习(判断题)
PTA—C语言期末复习(判断题)
286 0
高效项目管理必备!2024年10款优质软件全解析
在快节奏的互联网行业中,高效的项目管理工具是成功的关键。本文推荐10款优质项目管理软件,包括板栗看板、Asana、Trello、Jira、Microsoft Project等,帮助团队提升效率、优化资源、缩短项目周期。每款工具都有其独特优势,适合不同规模和需求的团队使用。
150 0
高效项目管理必备!2024年10款优质软件全解析
Lodash学习之数组取差集
Lodash学习之数组取差集
2472 0
Lodash学习之数组取差集
从效率到价值:云峰会阿里云产业智能OpenTrek重磅发布
随着数字化技术的快速发展,企业数字化转型的需求随之增加。如何满足企业数字化转型需求、高效解决行业难题成为新的挑战。“封装”五大技术的产业智能OpenTrek在云峰会上正式发布,其中包含了阿里云多年沉淀出的行业数据平台、行业智能产品以及与合作伙伴共创的行业解决方案。阿里云智能副总裁、行业解决方案研发部负责人曾震宇表示:产业智能=数据+计算+智能化。
从效率到价值:云峰会阿里云产业智能OpenTrek重磅发布
无影将推动办公方式新变革-无影云电脑测评体验记录
无影云电脑的诞生,是众多用户的福利,我作为开发者社区的体验测评者,应当把无影云电脑系统的优势体验感以及不足之处给提出来,让无影更加的完善和安全。本人目前用的是无影云配置是4核8G,开通了互联网功能(10M带宽),系统用的是windows2016。
4467 11
无影将推动办公方式新变革-无影云电脑测评体验记录
这位三个月就想辞职的阿里工程师,现在,真香!
他前段时间和剑桥大学教授 Frank Kelly 合作,设计了新一代高速网络拥塞控制协议 HPCC。
554 0
这位三个月就想辞职的阿里工程师,现在,真香!
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问