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

 

 

posted @ 2016-07-01 14:38  SophiaLiu  阅读(1721)  评论(0)  编辑  收藏  举报