点击页面出现爱心效果的源码（转载学习）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

(function(window,document,undefined){         var hearts = [];         window.requestAnimationFrame = (function(){                 return window.requestAnimationFrame ||                            window.webkitRequestAnimationFrame ||                            window.mozRequestAnimationFrame ||                            window.oRequestAnimationFrame ||                            window.msRequestAnimationFrame ||                            function (callback){                                    setTimeout(callback,1000/60);                            }         })();         init();         function init(){                 css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");                 attachEvent();                 gameloop();         }         function gameloop(){                 for(var i=0;i<hearts.length;i++){                     if(hearts[i].alpha <=0){                             document.body.removeChild(hearts[i].el);                             hearts.splice(i,1);                             continue;                     }                     hearts[i].y--;                     hearts[i].scale += 0.004;                     hearts[i].alpha -= 0.013;                     hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;             }             requestAnimationFrame(gameloop);         }         function attachEvent(){                 var old = typeof window.onclick==="function" && window.onclick;                 window.onclick = function(event){                         old && old();                         createHeart(event);                 }         }         function createHeart(event){             var d = document.createElement("div");             d.className = "heart";             hearts.push({                     el : d,                     x : event.clientX - 5,                     y : event.clientY - 5,                     scale : 1,                     alpha : 1,                     color : randomColor()             });             document.body.appendChild(d);     }     function css(css){             var style = document.createElement("style");                 style.type="text/css";                 try{                     style.appendChild(document.createTextNode(css));                 }catch(ex){                     style.styleSheet.cssText = css;                 }                 document.getElementsByTagName('head')[0].appendChild(style);     }         function randomColor(){                 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";         } })(window,document);