微信营销平台系统–刮刮乐的开发

下载 jquery扩展wScratchPad.js, 原站的页面打不开,我这里提供一个下载地址 wScratchPad-2.1.0.zip

然后(冷静),一些没节操的博主,直接转别人的文章,验证的过程都省了,应该坑了不是小白。我这里修正一下

在这个扩展里面,怎么才能过去用户的刮开的面积

代码如下:

$("#wScratchPad3").wScratchPad({
 cursor:'',  //设置鼠标的样式
 color:'gray' ,  //设置覆盖物的颜色,跟image2功能相斥
 width:"300",
 height:"100",
 image: "" //顶部的图片
// 更多配置相关的选项请看源码
 scratchUp: function(e, percent){
 if(percent > 60)
 {
 alert("sss");
 }
 }
 });

从上面的代码,看的出来,这个跟网上所谓的教程不一样,这里获取刮开的范围用到函数不是

scratchMove()
而是
scratchUp()

为嘛?看源码

代码如下:

scratchFunc: function(e, $this, event)
        {
            e.pageX = Math.floor(e.pageX - $this.canvas_offset.left);
            e.pageY = Math.floor(e.pageY - $this.canvas_offset.top);
            $this['scratch' + event](e, $this);
            if(this.settings.realtimePercent || event == "Up") {
                if($this.settings['scratch' + event]) $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]);
            }
        }

这里这个获取函数绑定的UP 而不是move

(0)

相关推荐

  • js HTML5手机刮刮乐代码

    手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view

  • 移动端刮刮乐的实现方式(js+HTML5)

    程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐

  • 基于Android自定义控件实现刮刮乐效果

    只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; imp

  • Android实现刮刮乐示例分析

    微信公众号有很多都做刮刮乐的活动,本文就实现了刮刮乐的效果,具体代码如下: 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOUCH_TOLERANC

  • 微信营销平台系统–刮刮乐的开发

    下载 jquery扩展wScratchPad.js, 原站的页面打不开,我这里提供一个下载地址 wScratchPad-2.1.0.zip 然后(冷静),一些没节操的博主,直接转别人的文章,验证的过程都省了,应该坑了不是小白.我这里修正一下 在这个扩展里面,怎么才能过去用户的刮开的面积 复制代码 代码如下: $("#wScratchPad3").wScratchPad({ cursor:'',  //设置鼠标的样式 color:'gray' ,  //设置覆盖物的颜色,跟image2功

  • 微信公众平台 发送模板消息(Java接口开发)

    前言:最近一直再弄微信扫码推送图文消息和模板消息发送,感觉学习到了不少东西.今天先总结一下微信公众平台模板消息的发送.因为这个自己弄了很久,开始很多地方不明白,所以今天好好总结一下. 微信公众平台技术文档:模板消息接口 一.概述 模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中,如信用卡刷卡通知,商品购买成功通知等.不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息. 关于使用规则,请注意: 1.所有服务号都可以在功能->添加功能插件处看到申请模板消息功能的入

  • 微信公众平台开发入门教程(SAE方倍工作室)

    我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见底部. 本系列教程将引导你完成如下任务: 创建新浪云计算平台应用启用微信公众平台开发模式基础接口消息及事件微信公众平台PHP SDK微信公众平台开发模式原理开发天气预报功能 第一章 申请服务器资源 创建新浪云计算应用 申请账号 我们使用SAE新浪云计算平台作为服务器资源,并且申请PHP环境+MySQL数据库作为程序运行环境.申请地址:http://sae.sina.com.cn/ ,使用新浪微博账号可以直接登录SAE,登录后SAE将赠送50

  • 微信小程序canvas实现刮刮乐效果

    本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 设计流程 设计思路 canvas设置背景图,作为中奖图片: 在canvas上绘制刮的灰色涂层: 通过绑定的事件,清除对应区域的涂层: 最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚. 1.全局常量 获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,canvas的面积. const

  • PHP微信刮刮卡 附微信接口

    无论大转盘也好,或者是刮刮卡都是抽奖都可以利用同样的方法来计算中奖的概率和控制奖池的数量,本文为大家分享了PHP微信刮刮卡实例代码,PHP微信刮刮卡+接口,可直接调用,自带微信接口,供大家学习. 效果图: prize.php <?php $rand = rand(1,100); if($rand<10){ $prize = '苹果1个'; }else if($rand<30){ $prize = '苹果2个'; }else if($rand<60){ $prize = '苹果3个'

  • 20行JS代码实现网页刮刮乐效果

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&

  • PHP使用Face++接口开发微信公众平台人脸识别系统的方法

    本文实例讲述了PHP使用Face++接口开发微信公众平台人脸识别系统的方法.分享给大家供大家参考.具体如下: 效果图如下: 具体步骤如下: 首先,先登录Face++的官网注册账号:官网链接 注册之后会获取到api_secret和api_key,这些在调用接口的时候需要用到. 然后接下来的就是使用PHP脚本调用API了. 在使用PHP开发微信公共平台的时候,推荐使用Github上的一款不错的框架:wechat-php-sdk 对于微信的常用接口做了一些封装,核心文件wechat.class.php

随机推荐