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。
    本博客作为本人软件学习记录而用,不提供任何软件的下载链接,敬请谅解
    可关注本人微信公众号【软件开发部门】回复“资源”获取部分免费资源
  • 相关阅读:
    JAVA_SWT 事件的四种写法
    JAVA静态数据的初始化;
    Centos 安装freesurfer fsl matlab 等软件---转自网络
    ROC和AUC————摘在网络
    转自网络用LIBSVM进行回归预测的粗浅认识————————作者师梦
    fmri格式相关简介————转自网络
    fMRI数据分析处理原理及方法————转自网络
    装机、做系统必备:秒懂MBR和GPT分区表____转载网络
    【转】Thymeleaf自动在URL后加了;jsessionid=的问题
    LeetCode (85): Maximal Rectangle [含84题分析]
  • 原文地址:https://www.cnblogs.com/xf23554/p/11941681.html
Copyright © 2011-2022 走看看