<!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
