码迷,mamicode.com
首页 > 其他好文 > 详细

刮刮卡刮奖效果

时间:2014-08-21 18:42:04      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   java   os   io   strong   


//代码框架

<
div class="content-box"> <div id="demo1" class="scratchpad"></div> <div id="demo1-percent">&nbsp;</div> <script type="text/javascript"> $(#demo1).wScratchPad({ size:25, //笔刷大小 fg: ./images/canvas-image.png,//图片背景 bg: ./images/openprize.png,//中奖图片 // realtime : true, cursor: crosshair,//刮奖橡皮图片 scratchDown: function(e, percent){ $(this.canvas).css(margin-right, $(this.canvas).css(margin-right) == "0px" ? "1px" : "0px"); }, scratchMove: function(e, percent){ $(this.canvas).css(margin-right, $(this.canvas).css(margin-right) == "0px" ? "1px" : "0px"); if (percent > 5) { this.clear(); $(#infor-btn).addClass("infor-select"); setTimeout("xxx()",1000) // $(‘#demo1-percent‘).html("<img src=‘images/area-open.png‘ />"); // $(‘#demo1-percent‘).css("background",‘url(images/area.png) no-repeat scroll‘) } }, scratchUp: function(e, percent){ $(this.canvas).css(margin-right, $(this.canvas).css(margin-right) == "0px" ? "1px" : "0px"); } }); function xxx(){ $(#demo1-percent).html("<img src=‘images/area-open.png‘ />"); } </script> </div>

.scratchpad {
height: 178px;
position: absolute;
right: 6px;
top: 110px;
width: 294px;
}

 

 

 



/*插件框架*/

/*
! wScratchPad - v2.1.0 - 2014-04-14 */ ! function(a) { "use strict"; function b(b, c) { this.$el = a(b), this.options = c, this.init = !1, this.enabled = !0, this._generate() } b.prototype = { _generate: function() { return a.support.canvas ? (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), "static" === this.$el.css("position") && this.$el.css("position", "relative"), this.$img = a(‘<img src=""/>‘).attr("crossOrigin", "").css({ position: "absolute", width: "100%", height: "100%" }), this.$scratchpad = a(this.canvas).css({ position: "absolute", width: "100%", height: "100%" }), this.$scratchpad.bindMobileEvents(), this.$scratchpad.mousedown(a.proxy(function(b) { return this.enabled ? (this.canvasOffset = a(this.canvas).offset(), this.scratch = !0, void this._scratchFunc(b, "Down")) : !0 }, this)).mousemove(a.proxy(function(a) { this.scratch && this._scratchFunc(a, "Move") }, this)).mouseup(a.proxy(function(a) { this.scratch && (this.scratch = !1, this._scratchFunc(a, "Up")) }, this)), this._setOptions(), this.$el.append(this.$img).append(this.$scratchpad), this.init = !0, void this.reset()) : (this.$el.append("Canvas is not supported in this browser."), !0) }, reset: function() { var b = this, c = Math.ceil(this.$el.innerWidth()), d = Math.ceil(this.$el.innerHeight()), e = window.devicePixelRatio || 1; this.pixels = c * d, this.$scratchpad.attr("width", c).attr("height", d), this.canvas.setAttribute("width", c * e), this.canvas.setAttribute("height", d * e), this.ctx.scale(e, e), this.pixels = c * e * d * e, this.$img.hide(), this.options.fg && ("#" === this.options.fg.charAt(0) ? (this.ctx.fillStyle = this.options.fg, this.ctx.beginPath(), this.ctx.rect(0, 0, c, d), this.ctx.fill(), this.$img.show()) : a(new Image).attr("src", this.options.fg).load(function() { b.ctx.drawImage(this, 0, 0, c, d), b.$img.show() })), //setTimeout(function(){ this.options.bg && ("#" === this.options.bg.charAt(0) ? this.$el.css("backgroundColor", this.options.bg) : (this.$el.css("backgroundColor", ""), this.$img.attr("src", this.options.bg)))//中奖图片 //}, 300) }, clear: function() { this.ctx.clearRect(0, 0, Math.ceil(this.$el.innerWidth()), Math.ceil(this.$el.innerHeight())) }, enable: function(a) { this.enabled = a === !0 ? !0: !1 }, destroy: function() { this.$el.children().remove(), a.removeData(this.$el, "wScratchPad") }, _setOptions: function() { var a, b; for (a in this.options) this.options[a] = this.$el.attr("data-" + a) || this.options[a], b = "set" + a.charAt(0).toUpperCase() + a.substring(1), this[b] && this[b](this.options[a]) }, setBg: function() { this.init && this.reset() }, setFg: function() { this.setBg() }, setCursor: function(a) { this.$el.css("cursor", a) }, _scratchFunc: function(a, b) { a.pageX = Math.floor(a.pageX - this.canvasOffset.left), a.pageY = Math.floor(a.pageY - this.canvasOffset.top), this["_scratch" + b](a), (this.options.realtime || "Up" === b) && this.options["scratch" + b] && this.options["scratch" + b].apply(this, [a, this._scratchPercent()]) }, _scratchPercent: function() { for (var a = 0, b = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height), c = 0, d = b.data.length; d > c; c += 4) 0 === b.data[c] && 0 === b.data[c + 1] && 0 === b.data[c + 2] && 0 === b.data[c + 3] && a++; return a / this.pixels * 100 }, _scratchDown: function(a) { this.ctx.globalCompositeOperation = "destination-out", this.ctx.lineJoin = "round", this.ctx.lineCap = "round", this.ctx.strokeStyle = this.options.color, this.ctx.lineWidth = this.options.size, this.ctx.beginPath(), this.ctx.arc(a.pageX, a.pageY, this.options.size / 2, 0, 2 * Math.PI, !0), this.ctx.closePath(), this.ctx.fill(), this.ctx.beginPath(), this.ctx.moveTo(a.pageX, a.pageY) }, _scratchMove: function(a) { this.ctx.lineTo(a.pageX, a.pageY), this.ctx.stroke() }, _scratchUp: function() { this.ctx.closePath() } }, a.support.canvas = document.createElement("canvas").getContext, a.fn.wScratchPad = function(c, d) { function e() { var d = a.data(this, "wScratchPad"); return d || (d = new b(this, a.extend(!0, {}, c)), a.data(this, "wScratchPad", d)), d } if ("string" == typeof c) { var f, g = [], h = (void 0 !== d ? "set": "get") + c.charAt(0).toUpperCase() + c.substring(1), i = function() { f.options[c] && (f.options[c] = d), f[h] && f[h].apply(f, [d]) }, j = function() { return f[h] ? f[h].apply(f, [d]) : f.options[c] ? f.options[c] : void 0 }, k = function() { f = a.data(this, "wScratchPad"), f && (f[c] ? f[c].apply(f, [d]) : void 0 !== d ? i() : g.push(j())) }; return this.each(k), g.length ? 1 === g.length ? g[0] : g: this } return c = a.extend({}, a.fn.wScratchPad.defaults, c), this.each(e) }, a.fn.wScratchPad.defaults = { size: 5, bg: "#cacaca", fg: "#6699ff", realtime: !0, scratchDown: null, scratchUp: null, scratchMove: null, cursor: "crosshair" }, a.fn.bindMobileEvents = function() { a(this).on("touchstart touchmove touchend touchcancel", function(a) { var b = a.changedTouches || a.originalEvent.targetTouches, c = b[0], d = ""; switch (a.type) { case "touchstart": d = "mousedown"; break; case "touchmove": d = "mousemove", a.preventDefault(); break; case "touchend": d = "mouseup"; break; default: return } var e = document.createEvent("MouseEvent"); e.initMouseEvent(d, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), c.target.dispatchEvent(e) }) } } (jQuery);

刮刮卡效果插件及用法~

刮刮卡刮奖效果,布布扣,bubuko.com

刮刮卡刮奖效果

标签:des   style   blog   color   java   os   io   strong   

原文地址:http://www.cnblogs.com/feiyang1989/p/3927492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!