刮刮乐，前端代码html+js实现，直接运行

1，介绍

刮刮乐实现，主要使用jquery.eraser.js实现擦除在线预览

效果图如下：

2，代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><meta name="full-screen" content="yes"><meta name="browsermode" content="application"><meta name="full-screen" content="yes"><meta name="browsermode" content="application"><meta name="x5-orientation" content="portrait"><title>刮刮乐</title><link rel="stylesheet" href="./index.css"></head><style>html,body {margin: 0;padding: 0;height: 100%;width: 100%;overflow: hidden;background-image: url(ggbj.jpg);}#app {position: relative;top: 50%; /*偏移*/transform: translateY(-50%);}.title {color: #ffe519;padding-top: 20%;}.outBox {height: 500px;background-color: #ab0000;text-align: center;position: relative;}#scratch {position: relative;top: 45%;width: 200px;height: 70px;background: #AB945E;z-index: 100;margin: auto;}#card {width: 100%;height: 100%;font-size: 28px;line-height: 70px;color: #ff0000;text-align: center;}.guaguaImg {position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height: 100%;}</style><body><div id="app" v-show="visible"><el-row type="flex" justify="space-around"><el-col :span="4" v-for="(index) in 5"><div class="outBox"><h1 class="title">惊喜刮刮乐</h1><div id="scratch"><div id="card">{{prizeList[index]}}</div><img class="guaguaImg" :id="ki(index)" src="./guagua.jpg"></div></div></el-col></el-row></div><script src="./vue.js"></script><script src="./index.js"></script><script src="./jquery-2.1.0.min.js"></script><script src="./jquery.eraser.js"></script><script>new Vue({el: '#app',data: function() {return { visible: false,prizeList: ["上班免打卡", "男票一枚", "谢谢参与", "女票一枚", "带薪休假", "一百万"]}},mounted() {for(var i = 1; i < 6; i++) {this.initCard(i);}},created() {this.visible = true;},methods: {ki: function (i) {return "guaguaImg" + i},initCard(index) {$("#guaguaImg" + index).eraser({"size": 15,completeRatio: .4, //擦到百分之多少清屏completeFunction: function() {$("#guaguaImg" + index).eraser('clear');}});}}})</script></body>
</html>

3，源代码下载

需要完整代码请留言或者联系我微信：1171053128

刮刮乐，前端代码html+js实现，直接运行相关推荐

不知道吃什么，前端代码html+js实现，直接运行
1,介绍不知道今天吃什么?为了解决这个世纪难题,使用代码实现,吃什么不用愁!在线预览废话不多说先上效果图如下: 2,代码 <!DOCTYPE html> <html>< ...
Canvas 实现刮刮乐 js实现刮刮乐
Canvas 实现刮刮乐 js实现刮刮乐 **思路: (1)首先需要一个盒子定位,确定刮刮乐区域想要放在哪里 (2)定位盒子里有个放内容的盒子,也就是放奖品的 (3)用一个画布(canvas)把上面的 ...
python制作刮刮乐惊喜揭秘呀~【趣味代码】
前言大家早好.午好.晚好吖 ❤ ~ 在今天,在我百般无聊的时候,突然发现一存货于是,我把从犄角旮旯里翻出来的代码一运行嘿,真不错~那在这里就分享给大家素材首先我们准备一些图片以及一首下载好的 ...
html刮奖特效,jQuery+HTML5手机刮刮乐刮奖代码
jQuery+HTML5手机刮刮乐刮奖代码 jQuery+HTML5手机刮刮乐刮奖代码 var _htmlFontSize = (function () { var clientWidth = doc ...
几行代码实现一用就上瘾的刮刮乐效果
前言这是一个简单却功能强大的刮刮乐视图,几行代码就可以实现刮刮乐效果,而且性能良好.下面有美女福利哟,相信我,你会喜欢的
php刮刮乐代码,手机刮刮乐HTML5代码
手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的 ...
使用css和js实现刮刮乐（简单易懂还有趣）
使用了html5的新标签canvas,画布. 思想:在一个div里面写上奖项,定义一个数组,为奖池,再定义一个随机数,使奖项随机.然后整一个画布把div给盖住,然后给画布整一个鼠标按下事件,鼠标按下的 ...
js 实现刮刮乐卡片效果
需要用到的知识点 1.canvas globalCompositeOperation : 设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上 ,这个属性是重点 2.canvas getIm ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...

刮刮乐，前端代码html+js实现，直接运行

1，介绍

2，代码

3，源代码下载

刮刮乐，前端代码html+js实现，直接运行相关推荐

最新文章

热门文章