轩枫阁

首页 / Web前端 / HTML / HTML5模仿刮奖效果-页面涂抹消失插件wScratch

HTML5模仿刮奖效果-页面涂抹消失插件wScratch

前言

HTML5的canvas有很多应用点,如绘画板、图形绘制、游戏交互、彩票刮刮乐等,除了这些,还有个比较好的点就是主页涂抹一部分之后,页面消失进入主要内容。

wScratch是一个模拟刮刮卡的jQuery插件,可以设置刮开纯色或者图像。

演示

显示刮卡百分比

efsa

到达一定百分比清空

sdfgdh

属性设置

可用的属性,以下是默认值

关于realtime,当设置为false时,百分比的计算仅在scratchUp抬起时计算,此方法可以用于提高性能。

关于bg和fg,值可以为含#号的10进制颜色,或者是图片路径。

使用方法及API

引入JS文件

涂抹百分比

设置值的其他写法

方法

官方主页

Github: https://github.com/websanova/wScratchPad

插件相关应用

在手机端应用

这个插件是为jQuery设计的,而移动端的库为zepto,所以这里将插件改造成适用于zepto的版本。

下载地址

1. wScratch.js

2. wScratch.min.js

realtime卡顿

上面介绍的realtime这个属性,即实时计算百分比,若设置为true,在PC端没有问题,但是再手机端就有压力了,会出现卡顿的情况,所以建议设置为false,并在scratchUp的时候检查百分比即可。

移动端例子

qr

http://www.xuanfengge.com/demo/201501/wScratch/demo.html

121/434
123/434

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]