zoukankan      html  css  js  c++  java
  • 点击鼠标出现桃心的特效js

     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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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);
    67 
    68  
    69 
    70 然后引入到具体的页面中即可
  • 相关阅读:
    快速排序最新理解
    八大排序算法
    图的创建
    ARM入门实践(一)----Mini6410上最简单的LED点灯裸机程序
    驱动编程思想之初体验 --------------- 嵌入式linux驱动开发之点亮LED
    嵌入式Linux LED小灯点亮实验
    手算KMP匹配的Next值和Nextval值
    及格率 不谢 cast(cast (sum(case when res>=60 then 1 else 0 end)*100/(count(1)*1.0) as float) as nvarchar)+'%' '及格率'
    Hibernate反向工程生成DAO
    struts2&&Hibernate Demo1
  • 原文地址:https://www.cnblogs.com/wrkjwl/p/9140958.html
Copyright © 2011-2022 走看看