欢迎来到小飞的博客

向前跑,迎着冷眼和嘲笑,生命的广阔不历经磨难怎能感到 命运它无法让我们跪地求饶 就算鲜血洒满了怀抱 继续跑 带着赤子的骄傲 生命的闪耀不坚持到底怎能看到 与其苟延残喘不如纵情燃烧吧。
扩大
缩小

点击页面出现爱心源代码

好东西,大家一起分享!

 1 (function(window,document,undefined){
 2         var hearts = [];
 3         window.requestAnimationFrame = (function(){
 4                 return window.requestAnimationFrame || 
 5                            window.webkitRequestAnimationFrame ||
 6                            window.mozRequestAnimationFrame ||
 7                            window.oRequestAnimationFrame ||
 8                            window.msRequestAnimationFrame ||
 9                            function (callback){
10                                    setTimeout(callback,1000/60);
11                            }
12         })();
13         init();
14         function init(){
15                 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;}");
16                 attachEvent();
17                 gameloop();
18         }
19         function gameloop(){
20                 for(var i=0;i<hearts.length;i++){
21                     if(hearts[i].alpha <=0){
22                             document.body.removeChild(hearts[i].el);
23                             hearts.splice(i,1);
24                             continue;
25                     }
26                     hearts[i].y--;
27                     hearts[i].scale += 0.004;
28                     hearts[i].alpha -= 0.013;
29                     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;
30             }
31             requestAnimationFrame(gameloop);
32         }
33         function attachEvent(){
34                 var old = typeof window.onclick==="function" && window.onclick;
35                 window.onclick = function(event){
36                         old && old();
37                         createHeart(event);
38                 }
39         }
40         function createHeart(event){
41             var d = document.createElement("div");
42             d.className = "heart";
43             hearts.push({
44                     el : d,
45                     x : event.clientX - 5,
46                     y : event.clientY - 5,
47                     scale : 1,
48                     alpha : 1,
49                     color : randomColor()
50             });
51             document.body.appendChild(d);
52     }
53     function css(css){
54             var style = document.createElement("style");
55                 style.type="text/css";
56                 try{
57                     style.appendChild(document.createTextNode(css));
58                 }catch(ex){
59                     style.styleSheet.cssText = css;
60                 }
61                 document.getElementsByTagName('head')[0].appendChild(style);
62     }
63         function randomColor(){
64                 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
65         }
66 })(window,document);

 

posted on 2019-11-27 13:43  开发小飞  阅读(1561)  评论(1编辑  收藏  举报

导航