游客
标题:js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC
正文:
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出： 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的效果图如下：ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个 代码如下: 在线查看刮刮卡擦的效果例子代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title>eraser effect</title><style type="text/css">#canvas{background: url(../images/winning-ticket.jpg); /*奖品图片*/width: 531px;height: 438px;}.before{background: none !important;}#canvas canvas{cursor: url("../images/hand.jpg") 0 0, auto; /*PC端的手势图片*/}</style></head><body oncontextmenu="return false;" onselectstart="return false;"><div id="canvas"></div></body><script type="text/javascript">(function () {window.onload =
[<<][[1]][2][3][>>]
查看评论(0)
发表评论
首页