www.adminn.cn
站长正能量分享网!

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

AD:阿里云服务器企业会员更优惠 腾讯云香港,韩国免备案服务器1.8折优惠

最近一直在做微信相关的开发工作,刮刮乐是一个最常见的微信应用了,网上也有很多的教程,本来是不想写这篇博文的,但又怕网友被坑,我还是写一下。

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

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

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

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

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

scratchMove()

而是

scratchUp()

为嘛?看源码,代码如下:

  1. scratchFunc: function(e, $this, event) 
  2.         { 
  3.             e.pageX = Math.floor(e.pageX – $this.canvas_offset.left); 
  4.             e.pageY = Math.floor(e.pageY – $this.canvas_offset.top); 
  5.             $this['scratch' + event](e, $this); 
  6.             if(this.settings.realtimePercent || event == "Up") { 
  7.                 if($this.settings['scratch' + event]) $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]); 
  8.             } 
  9.         } 

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

模板优惠价: (点击购买)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信营销平台系统–刮刮乐的开发》
文章链接:https://www.adminn.cn/news/8271.html
本站资源模板仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。2021.5月起,网站调整,暂不再分享免费模板。谢谢理解

Adminn.Cn 站长分享圈

帝国CMS精品模板腾讯云优惠券,代金券

2次开发,学习研究使用!扫码支付后联系QQ677123发货!

支付宝扫一扫打赏