技巧——美化博客
阿新 • • 發佈：2018-03-08
node 技術 [] settime https -a reat remove pagex 
可能是我沒學好js，總覺得js的代碼透露著一股詭異...
0.註意首先申請js權限。
1.鼠標單擊：社會主義特效
1 <script type="text/javascript"> 2 https://www.dujin.org/9088.html */ 3 var a_idx = 0; 4 jQuery(document).ready(function($) { 5 $("body").click(function(e) { 6 var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正"鼠標單擊：社會主義特效,"法治", "愛國", "敬業", "誠信", "友善"); 7 var $i = $("<span/>").text(a[a_idx]); 8 a_idx = (a_idx + 1) % a.length; 9 var x = e.pageX, 10 y = e.pageY; 11 $i.css({ 12 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 13 "top": y - 20, 14 "left": x, 15 "position": "absolute", 16 "font-weight": "bold", 17 "color": "#ff6651" 18 }); 19 $("body").append($i); 20 $i.animate({ 21 "top": y - 180, 22 "opacity": 0 23 }, 24 1500, 25 function() { 26 $i.remove(); 27 }); 28 }); 29 }); 30 </script>
（在“管理->設置”中的【頁首Html代碼】直接添加即可）
2.鼠標單擊：小心心特效
1 <script type="text/javascript" > 2 3 //-------------------------------封裝的 點擊心 形 自動執行 4 !function(e, t,evt) { 5 // 元素屬性賦值 6 function r() { 7 for (var e = 0; e < s.length; e++) 8 { 9 if(s[e].alpha <= 0) 10 { 11 t.body.removeChild(s[e].el), s.splice(e, 1); 12 }else{ 13 s[e].y--, 14 s[e].scale += .004, 15 s[e].alpha -= .013, 16 s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999"; 17 } 18 } 19 requestAnimationFrame(r); 20 return; 21 } 22 // 如果存在點擊事件 執行動畫 23 function n() { 24 var t = "function" == typeof e[evt] && e[evt]; 25 e[evt] = function(e) { 26 t && t(), o(e); 27 } 28 } 29 // 創建元素並且定義初始屬性數組 30 function o(e) { 31 var a = t.createElement("div"); 32 a.className = "heart", s.push({ 33 el: a, 34 x: e.clientX - 5, 35 y: e.clientY - 5, 36 scale: 1, 37 alpha: 1, 38 color: c() 39 }), t.body.appendChild(a) 40 } 41 // 定義樣式文件並添加 42 function i(e) { 43 var a = t.createElement("style"); 44 a.type = "text/css"; 45 try { 46 a.appendChild(t.createTextNode(e)) 47 } catch (t) { 48 a.styleSheet.cssText = e 49 } 50 t.getElementsByTagName("head")[0].appendChild(a) 51 } 52 // 返回隨機色 53 function c() { 54 return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")" 55 } 56 // 執行動畫兼容處理 57 var s = []; 58 e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || 59 function(e) { 60 setTimeout(e, 1e3 / 60) 61 }, i(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r() 62 }(window, document,‘onclick‘); 63 64 </script>鼠標單擊：小心心特效
（在“管理->設置”中的【頁首Html代碼】直接添加即可）
原文章鏈接
3.鼠標單擊：煙花+小心心特效
1 <script type="text/javascript" > 2 $(function(){ 3 var input_e=$("input"); 4 //javascript檢測瀏覽器是否支持某些事件 5 //typeof input["oninput"] == "undefined" 6 7 var y=input_e.offset().top; 8 var x=input_e.offset().left; 9 var len=0; 10 var firewNum=15;// 煙花個數 11 11 // 點擊頁面 在鼠標位置 出現心形 煙花 12 $("body").click(function(ev){ 13 xin(ev); // 點擊心形 14 Fireworks(ev)// 點擊煙花 15 }); 16 17 // 鼠標點擊出現心形 18 function xin(ev) 19 { 20 var color=randColor(); 21 var div=document.createElement("div"); 22 div.className=‘heart‘; 23 div.style.backgroundColor=color; 24 div.style.left=ev.pageX+‘px‘; 25 div.style.top=ev.pageY+‘px‘; 26 document.body.append(div); 27 var i=1; 28 var t=setInterval(function(){ 29 div.style.top=div.offsetTop-2+‘px‘; 30 i-=0.01; 31 div.style.opacity=i; 32 var scale=1+(1-i); 33 div.style.transform=‘scale(‘+scale+‘,‘+scale+‘) rotate(45deg)‘; 34 if(i<0.01 || div.style.top+div.offsetTop>=window.innerHeight) 35 { 36 div.remove(); 37 clearInterval(t); 38 } 39 },30) 40 } 41 42 // 隨機色 43 function randColor() 44 { 45 var r=parseInt(Math.random()*256); 46 var g=parseInt(Math.random()*256); 47 var b=parseInt(Math.random()*256); 48 var a=Math.random().toFixed(1) 49 var color=‘rgba(‘+r+‘,‘+g+‘,‘+b+‘,‘+a+‘)‘; 50 return color; 51 } 52 53 // 創建煙花 54 function Fireworks(ev) 55 { 56 // 煙花一種顏色-- 90去掉註釋 57 /*var color=randColor(); 58 for(var i=0;i<firewNum;i++) 59 { 60 create(ev,color); 61 }*/ 62 for(var i=0;i<firewNum;i++) 63 { 64 create(ev,null); 65 } 66 } 67 68 function create(ev,color) 69 {// 操作元素使用的 原生 js ,使用jquery 失敗 取不到元素 70 var div=document.createElement("div"); 71 div.className=‘Fireworks‘; 72 div.style.backgroundColor=randColor(); 73 // div.style.backgroundColor=color; 74 div.style.left=ev.pageX+‘px‘; 75 div.style.top=ev.pageY+‘px‘; 76 document.body.append(div); 77 var i=1; 78 // 正負 -5右 +5左 79 var speedX =(parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*5 + 1); 80 // 向上 -0--17 81 var speedY=-parseInt(Math.random()*18); 82 83 var time=setInterval(function() 84 { 85 ++i; 86 var left=div.offsetLeft+speedX; 87 var top=div.offsetTop+speedY+i; 88 // 加 i top 越來越大， 煙花下落，否則煙花向上飄 每次獲取得div.offsetTop越來越大 速度越來越慢 89 div.style.left=left+‘px‘; 90 div.style.top=top+‘px‘; 91 if(div.offsetLeft+div.offsetWidth>window.innerWidth || div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 ) 92 { 93 //如果超出屏幕 移除div 關閉定時器 94 div.remove(); 95 clearInterval(time); 96 } 97 98 },40) 99 } 100 }); 101 </script>【頁首Html代碼】
1 body{width:1000px; height:500px;} 2 input{ margin:100px; width:250px; height: 50px } 3 .Fireworks{width:4px; height: 4px; position: absolute;} 4 .heart{width: 10px;height: 10px;position: fixed;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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}【頁面定制CSS代碼】
（添加兩部分代碼）
技巧——美化博客