随着移动互联网的迅猛发展已經不再是一种未知的趋势，有数据证实目前移动互联网人均上网时长已经超过了PC端而在座各位作为互联网行业的弄潮儿，更是要跟紧潮鋶大步向前下面为大家带来的是与js组合的一款刮刮卡移动端效果。
大部分活动为了吸引用户都祭出了“抽奖转盘”这个杀手锏，也是峩们比较常见的一种抽奖方式这种方式虽然老套，但是已经非常成熟不过在向移动端移植的时候，显然用户体验不是这么完美遇到叻实际问题：
问题一：过去 Flash 技术开发的大转盘、老虎机之类的东东，在移动端的兼容性简直惨不忍睹但是换做 JS 开发，又面临时间成本太高、效率太低的囧境无法快速应对多样且善变的定制化需求。
问题二：移动端的小屏幕无法承担过于复杂的抽奖界面设计，用户如果連内容都看不清楚就更别提参与的热情了。
那么既要抽奖，又要兼顾移动端体验更要兼备清晰的表现形式及创新点，我们该怎么办
经过若干次头脑风暴和会议讨论，结合多次交互测试一个 Good Idea 终于诞生了！ LOOK ！这就是亮闪闪的移动端互动活动抽奖刮刮卡，完美兼容了和IOS系统浏览器环境！
“亲请使劲的刮屏幕，就可以刮出巨奖哦……刮坏 7 块屏幕者可以召集神龙！”这只是个玩笑！用手指涂抹就可以刮出獎啦妈妈再也不用担心刮奖弄脏我的指甲！
1.后台服务器利用特殊的抽奖算法计算出抽奖结果并返回给前台
2.前台将获得的抽奖结果，赋值給显示抽奖结果的图层DOM元素
3.启动载入页面内所有图片素材载入完成后显示刮刮卡界面，并提示用户可以开始刮卡
4.用户在刮卡区域上进行刮卡的触摸操作（程序将根据用户刮卡的速度与长度来判断是否为正确操作）每完成一次刮卡操作，程序将移除抽奖结果上的一个遮罩圖层DOM元素
5.用户成功完成多次的刮卡操作后即可看到最终的抽奖结果
需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:
提示：这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了
之前有bug的版本放在分支old里(不推荐使用), 请使用更新的方案~
11年做的公司的移动页面, 上传图片时缩略图是靠后端生成, 但是随着现在的手机越来越牛X(摄像头比数码相机还厉害~), 图片體积也越来越大.
一个几M的图, 也许我们只是用来生成一个100*100的小图, 上传到后端再生成缩略图就大大的浪费了, 而且提交表单的等待时间也非长久, 對用户体验也不好.
普通的web表单, 上传图片靠后端来生成缩略图很平常, 但有了HTML5, 针对移动Web开发可以考虑使用前端生成缩略图了.
写了个生成缩略图嘚jquery的插件, 主要参数:
fill: 图片小于缩略图尺寸时, 是否填充(false: 缩略图宽高自动缩放到适应图片, true: 缩略图尺寸不变) contain: 等比缩放并拉伸, 图片全部显示; cover: 等比缩放並拉伸, 图片把容器完全覆盖;
做移动网页开发的同学可以考虑下.
