【裝飾博客】一篇就夠了

　　前言：雖然說博客主要用來學習分享技術，但在學習之餘能把本身的博客打扮的更獨特，那是不錯的選擇。

這篇博客主要會分享 怎麼給本身的博客增長更多炫酷的特效（js動態），都是以博客園爲例。

• 申請博客的 js 權限（必須）；
• 博客背景上漂浮的磁力線，鼠標吸鐵石；
• 鼠標點擊出漂浮出字體("富強", "民主", "文明"...)；
• 在我的博客中播放本身喜歡的歌曲；
• 博客不使用 js 權限，也可使用 js 的黑科技；

 

一.申請博客的 JS 權限

　　博客中爲了安全考慮，默認是不能夠進行 JS 編輯的，因此咱們首先須要申請博客的 JS 權限。

　　

　　先進入 【管理】-【設置】 界面中；

　　

　　在上面圖中 紅框 的位置會有申請 JS 代碼權限的連接，進入填寫你的申請緣由，進行申請便可，我提交申請 大概一個小時以後審批經過了。

　　若是經過後就能夠對博客進行美化了，若是沒經過.....

 

二.博客背景上漂浮的磁力線，鼠標吸鐵石

　　你可能在不少博客中看到相似 當鼠標移動上去的時候會出現線條吸附在鼠標周圍的特效，鼠標離開的時候線條就自動散開。（個人博客中就能看到）

　　這些特效都是調用 JS 來完成的。我貼出代碼：

<script>

!function(){

function n(n,e,t){

return n.getAttribute(e)||t

}

function e(n){

return document.getElementsByTagName(n)

}

function t(){

var t=e("script"),o=t.length,i=t[o-1];

return{

l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.6),c:n(i,"color","255,255,255"),n:n(i,"count",150)
　　<!-- opacity 參數設置的是透明程度，數字越小越透明； color 設置顏色； count 設置磁線的數量 -->

}

}

function o(){

a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,

c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

}

function i(){

r.clearRect(0,0,a,c);

var n,e,t,o,m,l;

s.forEach(function(i,x){

for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],

null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,

l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),

t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))

}),

x(i)

}

var a,c,u,m=document.createElement("canvas"),

d=t(),l="c_n"+d.l,r=m.getContext("2d"),

x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||

function(n){

window.setTimeout(n,1e3/45)

},

w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,

window.onmousemove=function(n){

n=n||window.event,y.x=n.clientX,y.y=n.clientY

},

window.onmouseout=function(){

y.x=null,y.y=null

};

for(var s=[],f=0;d.n>f;f++){

var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})

}

u=s.concat([y]),

setTimeout(function(){i()},100)

}();

</script>

　　以上代碼中 紅色 註釋是主要能夠修改的參數了，你要是喜歡的話，還能夠仔細研究研究。

　　這時，咱們要作的就是把這段代碼複製到 如下位置

　　

　　這三個位置，就如介紹，分別是 博客側邊欄公告、頁首、頁腳。咱們這裏的 JS 代碼放在哪裏都是能夠的。保存以後就能看到博客中出現效果了。

 

三.鼠標點擊出漂浮出字體("富強", "民主", "文明"...)

　　和上面同樣，這個特效只須要複製 JS 代碼就能夠。貼代碼

<script type="text/javascript">
/* 鼠標特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
　　　　　　/* 可想而知，這裏能夠修改顯示的字 */ var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

　　貼代碼 保存以後就能看到博客中出現效果了。

　　其實，能夠本身寫 JS 代碼，實現你本身喜歡的特效，作出獨一無二的博客。

 

四.在我的博客中播放本身喜歡的歌曲

 　　首先咱們要作的就是進入 【網易雲音樂網頁版】，選擇本身喜歡的歌曲。

　　

　　點擊 【生成外鏈播放器】

　　　

　　這個地方須要注意的是，博客園不支持 iframe 插件，因此咱們選擇 flash 插件  ，再選擇合適的尺寸。 複製 HTML 代碼，把代碼粘貼到 博客側邊欄公告。　　

　　

　　保存後會在公告欄處出現 播放器。（固然了，若是歌曲太過另類，可能會嚇跑訪客，而且有些同窗比較喜歡安靜，因此謹慎考慮使用）

 

五.博客不使用 js 權限，也可使用 js 的黑科技

　　若是你沒有得到 JS 權限的話，你再 頁首HTML編輯的地方 使用 <script> 保存時會被刪掉。

　　解決方法就是使用 <img> 標籤。 

　　給<img>標籤添加 onload，onerro r事件，能夠執行就 js 了。　

<img src="." onerror="confirm('能夠執行JS！')" />

　　在這裏，給一個img標籤編寫一個錯誤的地址，這樣會觸發img標籤的行內onerror事件，就能夠執行任意JS代碼了。

　　咱們把這段代碼，放到 頁首HTML 中看看效果。

　　

　　只要找到了開口就能夠利用此開口執行任何代碼了。