点击页面出现爱心源代码

时间:2019-11-27
本文章向大家介绍点击页面出现爱心源代码,主要包括点击页面出现爱心源代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

好东西,大家一起分享!

 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);

原文地址:https://www.cnblogs.com/xf23554/p/11941681.html