zoukankan      html  css  js  c++  java
  • 点击页面出现爱心源代码

    好东西,大家一起分享!

     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);
    作者:小飞
    备注:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
    备注:部分图片下载来源于网络,如若有侵权,请联系本人予以删除,邮箱:2777418194@qq.com。
    本博客作为本人软件学习记录而用,不提供任何软件的下载链接,敬请谅解
    可关注本人微信公众号【软件开发部门】回复“资源”获取部分免费资源
  • 相关阅读:
    SQL 操作结果集 -并集、差集、交集、结果集排序
    MongoDB系列四:解决secondary的读操作
    org.apache.hadoop.ipc.RemoteException: User: root is not allowed to impersonate root
    hive 中窗口函数row_number,rank,dense_ran,ntile分析函数的用法
    FormData上传文件同时附带其他参数
    Hive删除分区
    Hive日期格式转换用法
    HIVE 不支持group by 别名
    ODS与EDW的区别
    hive数据类型转换、字符串函数、条件判断
  • 原文地址:https://www.cnblogs.com/xf23554/p/11941681.html
Copyright © 2011-2022 走看看