js实现刮刮卡效果
<!DOCTYPE html>
<html>
<body>
<canvas/>
<script>
(function(bodyStyle) {
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none'; var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute'; img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false; function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
} function eventDown(e){
e.preventDefault();
mousedown=true;
} function eventUp(e){
e.preventDefault();
mousedown=false;
} function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 20, 0, Math.PI * 2);
fill();
}
}
} canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);
layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
img.src = 'prize.jpg';
})(document.body.style);
</script>
</body>
</html>
<style>body{
margin:50px;
background-color:#2C3437;
}
.content{
display:inline-block;
width:350px;
height:239px;
margin-right:-4px;
}
.play{
cursor:pointer;
background-color:#060;
}
div>div{
display:block;
height:20px;
}
div>div>div{
width:16px;
height:16px;
background-color:#FFF;
display:inline-block;
float:right;
margin:2px;
}
</style>
<script>$(document).ready(function(){
animate();
$(".play").click(animate).mouseover(function(){
$(".play").css({"background-color":"#A55"});
}).mouseout(function(){
$(".play").css({"background-color":"#060"});
});
});
function animate(){
$('div>div>div').each(function(id){
$(this).css({
position: 'relative',
top: '-200px',
opacity: 0
});
var wait = Math.floor((Math.random()*3000)+1);
$(this).delay(wait).animate({
top: '0px',
opacity: 1
},1000);
});
}
</script> <!-- Generated by RunJS (Mon Mar 24 17:39:15 CST 2014) 1ms -->
这张图片是prize.jpg
js实现刮刮卡效果的更多相关文章
- js实现刮刮卡抽奖
刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解) 推荐理由:无缝刮痕,兼容性好,上手简单 插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博 ...
- qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- 使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
- js-刮刮卡效果,由jquery-eraser源码改的vue组件
vue-eraser 一款用于vue刮刮卡的组件 github地址: vue-eraser npm地址: vue-eraser 在网上有看到过几个版本的组件,都有点问题 1.拉快了,就会断,连不起来( ...
- Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...
- canvas实现刮刮卡效果
canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...
随机推荐
- linux内核地址mapping
linux内核采用页式存储管理,虚拟地址空间划分成固定大小的页面,由MMU(memory manager unit)在运行时将virtual address mapping to (或者说是变化成)某 ...
- 【转】强大的vim配置文件,让编程更随意
原文地址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主 ...
- iomanip.h
http://baike.baidu.com/link?url=zuNLgcUVylhUYYefyV13F38NChIMx8nnCEWV5zkkTQMrrSdKPxUERZuydSHtp6sXukWv ...
- jpa仓库接口
可以使用的仓库接口有: Repository: 是 Spring Data的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法. CrudRepository: 继承Repos ...
- 需要熟记的git命令
需要熟记的github常用命令 总结一下ubuntu下github常用的命令,设置部分跳过,假设repository的名字叫hello-world: .创建一个新的repository: 先在gith ...
- 深入学习APC
一.前言 在NT中,有两种类型的APCs:用户模式和内核模式.用户APCs运行在用户模式下目标线程当前上下文中,并且需要从目标线程得到许可来运行.特别是,用户模式的APCs需要目标线程处在alerta ...
- MongoDB 快速入门--高级
引用 --------->DBRefs DBRef的形式: { $ref : , $id : , $db : } $ref:集合名称 $id:引用的id $db:数据库名称,可选参数 { &qu ...
- 关于struts2 验证框架在联网的时候可以用,不联网不起作用的问题
这是一个让我很头痛的问题,我是在一个其他的项目框架的基础上来开发新的项目. 当使用struts验证框架时,突然发现这个验证不起作用了,我就纳闷了之前用这个开发的项目好好的怎么到我这就不能用了呢? xm ...
- Intel大坑之中的一个:丢失的SSE2 128bit/64bit 位移指令,马航MH370??
缘由 近期在写一些字符串函数的优化,兴趣使然.但是写的过程中,想要实现 SSE2 128 bit / 64 bit 的按 bit 逻辑位移.遇到了一个大坑,且听我娓娓道来. 我并不想用什么马航370来 ...
- python的一些总结5
上面4都是水的 恩每篇都一点知识点 用来写给不耐烦的人看..哈哈这篇 争取不水. 上面4篇如果 掌握 基本上是 80%常用的代码了. 1.下面讲一下 比较常用的代码: macro(jinja 上的功能 ...