微信公眾平臺開發（55）刮刮樂

阿新 • • 發佈：2019-01-15

關於wScratchPad

wScratchPad.js，A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.

wScratchPad是jQuery上的一個外掛，它能模擬出刮的行為，使你能“擦去”一層覆蓋物，這層覆蓋物既可是一個圖片，也可以是某種顏色塗層。

官方網址為 http://wscratchpad.websanova.com/

配置選項：

$('#elem').wScratchPad({
  size        : 5,          // The size of the brush/scratch.
  bg          : '#cacaca',  // Background (image path or hex color).
  fg          : '#6699ff',  // Foreground (image path or hex color).
  realtime    : true,       // Calculates percentage in realitime.
  scratchDown : null 
,       // Set scratchDown callback.
  scratchUp   : null,       // Set scratchUp callback.
  scratchMove : null,       // Set scratcMove callback.
  cursor      : 'crosshair' // Set cursor.
});

示例

包含標頭檔案:

<script type="text/javascript" src="./wScratchPad.min.js"></script>

Percent scratched

$("#elem").wScratchPad({
  scratchDown: function(e, percent){ console.log(percent); },
  scratchMove: function(e, percent){ console.log(percent); },
  scratchUp: function(e, percent){ console.log(percent); }
});

Update on the Fly

var sp = $("#elem").wScratchPad();

sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');

// Or directly with element.
$("#elem").wScratchPad('image', './images/winner.png');

Methods

$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', <boolean>);

演示

下面是演示， 你可以直接用滑鼠來刮

下面是刮完70%時自動清除剩下的

100

完整程式碼如下所示：

<!DOCTYPE html>
<html>
<head>
    
    <meta CHARSET="UTF-8">
    
    <title>刮刮樂</title>
    <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="./wScratchPad.js"></script>
</head>
    <div id="wScratchPad3" style="display:inline-block; position:relative; border:solid black 1px;"></div>
    
    <script type="text/javascript">
        $("#wScratchPad3").wScratchPad({
            cursor:'./cursors/mario.png',
            scratchMove: function(e, percent)
            {
                if(percent > 70)
                this.clear();
            },
        });
    </script>
</body>
</html>

與其他圖片等結合後，在微信瀏覽器中顯示如下所示：

更詳細的介紹及完整程式碼，請參考微信公眾平臺開發最佳實踐一書。

=============================================================

歡迎關注方倍工作室微信，瞭解我們及行業的最新動態

微信公眾平臺開發（55）刮刮樂

關於wScratchPad wScratchPad.js，A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or ima

微信公眾平臺開發（二）網頁授權

是否 color 平臺開發基本業務自動跳轉 str gpo 點擊微信公眾平臺OAuth2.0授權詳細步驟如下： 1. 用戶關註微信公眾賬號。2. 微信公眾賬號提供用戶請求授權頁面URL。3. 用戶點擊授權頁面URL，將向服務器發起請求4. 服務器詢問用戶是否同意授權

微信公眾平臺開發（PHP）（三）訂閱事件（subscribe）處理

一、簡介新使用者關注微信公眾平臺，將產生一個訂閱事件，即subscribe事件，預設程式碼中沒有對這一事件進行相應回覆處理。在新使用者關注公眾平臺後，可能想知道該平臺提供了哪些功能，以及怎樣使用該平臺，通俗一點講就是該平臺的“使用說明書”。本文將詳細講述對su

asp.net 微信公眾平臺開發（一）公眾賬號的註冊、設定、登入

微信公眾平臺現在很火，但是大部分都是在微信已有平臺上的使用者，而非開發者，所以我根據自己的經驗在這裡給大家分享一下基於asp.net 開發的微信公眾平臺，用的是別人開發的一款基於ASP.NET 的SDK，已全面支援微信5.0所有介面。一、註冊進入微信公眾平臺首頁，

微信公眾平臺開發（1）配置介面(微信公眾平臺搭建php開發配置詳細步驟講解)

一、簡介微信公眾平臺是騰訊公司在微信的基礎上新增的功能模組，通過這一平臺，個人和企業都可以打造一個微信的公眾號，並實現和特定群體的文字、圖片、語音的全方位溝通、互動。二、通訊機制三、註冊微信平臺公眾帳號四、伺服器端配置4.1 示例程式碼設定微信公眾平臺提供了一個php示例程式碼：（百度雲盤連結地址：https

微信公眾平臺開發（十）訊息回覆總結

一、簡介微信公眾平臺提供了三種訊息回覆的格式，即文本回復、音樂回覆和圖文回覆，在這一篇文章中，我們將對這三種訊息回覆的格式做一下簡單講解，然後封裝成函式，以供讀者使用。二、思路分析對於每一個POST請求，開發者在響應包中返回特定xml結構，對該訊息進行響應（現

JAVA帶你一步一步實現微信公眾號開發（一）--接入微信公眾平臺

（一）接入流程解析在我們的開發過程中無論如何最好的參考工具當然是我們的官方文件了：http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html 通過上面我們可以看出其中接入微信公眾平臺開發，開發者需要按照如下

微信公眾平臺開發（十二）傳送客服訊息

原文：https://www.cnblogs.com/mchina/p/3711217.html 微信公眾平臺開發（十二）傳送客服訊息一、簡介當用戶主動發訊息給公眾號的時候（包括髮送資訊、點選自定義選單、訂閱事件、掃描二維碼事件、支付成功事件、使用者維權），微信將

微信公眾號開發（１）－－微信公眾平臺與後臺伺服器

一、前言　　今天開始整理一下前面兩個月關於微信公眾號開發的學習，鑑於本人是邊學習邊總結，故錯誤與不足之處還望包涵。鑑於很多例如購買伺服器、搭建伺服器等大條的操作就不展開敘述了。　　本博文主要包涵以下內容：　　開發的前期準備微信公眾平臺與後臺伺

微信公眾號開發（一）

jpg 解壓 china arc 公眾平臺開發技術分享更換微信公眾號 4.1 示例代碼設置首先下載此處的php接入代碼，在公眾號中配置 url 地址指向文件代碼只需更換自定義的token 即可這樣就完成最初的接入微信公眾平臺提供了一個php示例

微信公眾號開發（一）微信驗證開發者服務器接口

mage down charset 流程圖 ringbuf image put 不知道 als 微信驗證開發者服務器接口微信驗證開發者服務器接口如圖所示，開發者可填寫自己服務器的驗證token的接口地址，以及自定義的token（博主申請的測試號，使用natapp來進

微信公眾號開發（一）--入門

ref 微信消息 .html 基礎類型叠代開發語言 app 媒體類型開始背景近期遇到幾個項目需要使用微信公眾號進行信息的推送和查看，針對項目的需求，對微信公眾號的開發進行了一段時間的研究，並實現了掃碼獲取微信信息，綁定微信賬號、微信消息推送等功能，準備通過幾篇文章

微信公眾號開發（二）--掃碼綁定微信賬號

stat 需要 ech 不同指定步驟引導 connect amp 簡書地址：https://www.jianshu.com/p/b2884a226247 當業務系統產生消息需要通過微信推送給指定的用戶時，首頁需要將業務系統類的用戶和微信賬號建立一個關系。這裏采用的是微

微信公眾號開發（3）---使用開源組件開發進行接口驗證

lse getwriter mon res 幫我完成 app private als 在經過一系列的微信開發後，關於微信的開發確實內容很龐大，一些基礎的組件都要有我們開發者進行編寫，有沒有簡單的方法呢？哈哈----在開源社區中無意中找到了關於微信全套開發的sdk,裏面包

微信公眾號開發（5）---使用開源組件開發公眾號OAuth2.0網頁授權授權登錄

esp 開發 color use oauth2 url rec wired 公眾號搞清微信公眾號授權登錄的步驟步驟，我們的開發就完成了一大步獻上github 地址： https://github.com/Wechat-Group/weixin-java-tools/wi

C#微信公眾號開發 -- （四）獲取API呼叫所需的全域性唯一票據access_token

access_token是公眾號的全域性唯一票據，公眾號呼叫各介面時都需使用access_token。開發者需要進行妥善儲存。access_token的儲存至少要保留512個字元空間。access_token的有效期目前為2個小時，需定時重新整理，重複獲取將導致上次獲取的access_token失效。獲取

C#微信公眾號開發 -- （二）驗證成為開發者

接下來就是驗證成為開發者了。先來看一下驗證的介面及需要填寫的資訊在介面配置資訊中填寫需要處理驗證資訊的頁面或者一般性處理檔案，這裡以aspx頁面為例 URl中的格式為：http://XXX.com/wxapi.aspx ，其中XXX.com也即是上文提到的需要有一個外網可以訪問的域名，wxapi.a

C#微信公眾號開發 -- （一）開發之前的準備

本系列文章講述的是利用C#語言開發微信公眾號的例項教程，主要是服務號的開發（因為訂閱號不能獲取微信開發的高階介面）想要開發微信服務公眾號，首先必須要有一個認證的微信服務號，這樣才能夠使用微信提供的所有高階介面。在這裡我個人主要以開發講解為主，所以使用了微信提供給開發者一個很方便的工具--公眾平臺測試帳號（

C#微信公眾號開發 -- （三）使用者關注之後自動回覆

通過了上一篇文章之後的微信開發者驗證之後，我們就可以做微信公眾號的程式碼開發了。當我們點選關注某個公眾號的時候，有時候會發現他會自動給我們回覆一條訊息，比如歡迎關注XXX公眾號。這個功能其實是在點選關注的時候，使用者觸發了微信定義的事件，同時微信會返回給我們一個XML資料包，微信官方的解釋如下：推送X

微信公眾號開發（四） -- 自定義分享樣式

1.微信的分享介面呼叫其實相當於是重寫了個介面，自定義的是分享樣式 2.位置還是右上角的三個點點首先獲取jssdk 因為我的token是儲存在資料庫裡的，所以只要appid和token 沒有的話需要加一步獲取token值 <?php class JSSDK { priv

微信公眾平臺開發（55）刮刮樂

關於wScratchPad

相關外掛

配置選項：

示例

Percent scratched

Methods

演示

下面是刮完70%時自動清除剩下的

相關推薦