wordpress添加鼠标点击上升红字特效

原创 Laughing  2017-06-30 22:03  阅读 391 次 评论 0 条

将一下代码放到主题footer.php文件body前,即可实现鼠标点击红色数字上升特效

  1. <script type="text/javascript">  
  2.     (function(window,document,undefined){  
  3.         var hearts = [];  
  4.         window.requestAnimationFrame = (function(){  
  5.             return window.requestAnimationFrame ||  
  6.                 window.webkitRequestAnimationFrame ||  
  7.                 window.mozRequestAnimationFrame ||  
  8.                 window.oRequestAnimationFrame ||  
  9.                 window.msRequestAnimationFrame ||  
  10.                 function (callback){  
  11.                     setTimeout(callback,1000/60);  
  12.                 }  
  13.         })();  
  14.         init();  
  15.         function init(){  
  16.             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;}");  
  17.             attachEvent();  
  18.             gameloop();  
  19.         }  
  20.         function gameloop(){  
  21.             for(var i=0;i<hearts.length;i++){  
  22.                 if(hearts[i].alpha <=0){  
  23.                     document.body.removeChild(hearts[i].el);  
  24.                     hearts.splice(i,1);  
  25.                     continue;  
  26.                 }  
  27.                 hearts[i].y--;  
  28.                 hearts[i].scale += 0.004;  
  29.                 hearts[i].alpha -= 0.013;  
  30.                 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;  
  31.             }  
  32.             requestAnimationFrame(gameloop);  
  33.         }  
  34.         function attachEvent(){  
  35.             var old = typeof window.onclick==="function" && window.onclick;  
  36.             window.onclick = function(event){  
  37.                 old && old();  
  38.                 createHeart(event);  
  39.             }  
  40.         }  
  41.         function createHeart(event){  
  42.             var d = document.createElement("div");  
  43.             d.className = "heart";  
  44.             hearts.push({  
  45.                 el : d,  
  46.                 x : event.clientX - 5,  
  47.                 y : event.clientY - 5,  
  48.                 scale : 1,  
  49.                 alpha : 1,  
  50.                 color : randomColor()  
  51.             });  
  52.             document.body.appendChild(d);  
  53.         }  
  54.         function css(css){  
  55.             var style = document.createElement("style");  
  56.             style.type="text/css";  
  57.             try{  
  58.                 style.appendChild(document.createTextNode(css));  
  59.             }catch(ex){  
  60.                 style.styleSheet.cssText = css;  
  61.             }  
  62.             document.getElementsByTagName('head')[0].appendChild(style);  
  63.         }  
  64.         function randomColor(){  
  65.             return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";  
  66.         }  
  67.     })(window,document);  
  68. </script>  
本文地址:https://www.lisen.me/rising-wordpress-add-the-mouse-to-click-the-scarlet-letter-special-effects.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情