摘要：給博客園加一個(gè)會(huì)動(dòng)的小人給博客園加一個(gè)會(huì)動(dòng)的小人效果大概是這樣，感覺(jué)十分可愛(ài)那么怎么添加呢首先需要開(kāi)通權(quán)限。

給博客園加一個(gè)會(huì)動(dòng)的小人-spig.js

效果大概是這樣，感覺(jué)十分可愛(ài)qvq

那么怎么添加呢？

首先需要開(kāi)通js/html權(quán)限。

然后在頁(yè)腳html代碼中加入以下代碼

    
……
    

在側(cè)邊欄css中加入以下代碼(注意有個(gè)地方需要自己填圖片地址)

.spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;}
#message{color :#191919;border: 1px solid #c4c4c4;background:#ffffd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-45px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
.mumu{width:175px;height:246px;cursor: move;background:url(這里填圖片地址) no-repeat;}

上面鏈接內(nèi)的js文件如下，里面有一些地方需要自己修改。

順便吐槽一句，原作者給的api都掛的差不多了，然鵝我是個(gè)js菜雞連get/post都不會(huì)，所以湊合著改了一下api，歡迎各位大佬給出更好的解決方案qwq

//右鍵菜單
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage("秘密通道:
    
自為風(fēng)月馬前卒  ",10000);
}
});
$("#spig").bind("contextmenu", function(e) {
    return false;
});
});

//鼠標(biāo)在消息上時(shí)
jQuery(document).ready(function ($) {
    $("#message").hover(function () {
       $("#message").fadeTo("100", 1);
     });
});


//鼠標(biāo)在上方時(shí)
jQuery(document).ready(function ($) {
    //$(".mumu").jrumble({rangeX: 2,rangeY: 2,rangeRot: 1});
    $(".mumu").mouseover(function () {
       $(".mumu").fadeTo("300", 0.3);
       msgs = ["我隱身了，你看不到我", "我會(huì)隱身哦！嘿嘿！", "別動(dòng)手動(dòng)腳的，把手拿開(kāi)！", "把手拿開(kāi)我才出來(lái)！"];
       var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    $(".mumu").mouseout(function () {
        $(".mumu").fadeTo("300", 1)
    });
});


//開(kāi)始
jQuery(document).ready(function ($) {
    if (isindex) { //如果是主頁(yè)
        var now = (new Date()).getHours();
        if (now > 0 && now <= 6) {
            showMessage(visitor + " 你是夜貓子呀？還不睡覺(jué)，明天起的來(lái)么你？", 6000);
        } else if (now > 6 && now <= 11) {
            showMessage(visitor + " 早上好，早起的鳥(niǎo)兒有蟲(chóng)吃噢！早起的蟲(chóng)兒被鳥(niǎo)吃，你是鳥(niǎo)兒還是蟲(chóng)兒？嘻嘻！", 6000);
        } else if (now > 11 && now <= 14) {
            showMessage(visitor + " 中午了，吃飯了么？不要餓著了，餓死了誰(shuí)來(lái)挺我呀！", 6000);
        } else if (now > 14 && now <= 18) {
            showMessage(visitor + " 中午的時(shí)光真難熬！還好有你在！", 6000);
        } else {
            showMessage(visitor + " 快來(lái)逗我玩吧！", 6000);
        }
    }
    else {
        showMessage("歡迎" + visitor + "來(lái)到《" + title + "》", 6000);
    }
    $(".spig").animate({
        top: $(".spig").offset().top + 300,
        left: document.body.offsetWidth - 185
    },
    {
        queue: false,
        duration: 1000
    });
});

//鼠標(biāo)在某些元素上方時(shí)
jQuery(document).ready(function ($) {
    $("h2 a").click(function () {//標(biāo)題被點(diǎn)擊時(shí)
        showMessage("萌萌地加載《" + $(this).text() + "》中，請(qǐng)稍候");
    });
    $("h2 a").mouseover(function () {
        showMessage("要看看《" + $(this).text() + "》這篇隨筆么？");
    });
    $("#prev-page").mouseover(function(){
        showMessage("要翻到上一頁(yè)嗎?");
    });
    $("#next-page").mouseover(function(){
        showMessage("要翻到下一頁(yè)嗎?");
    });
    $("#index-links li a").mouseover(function () {
        showMessage("去 " + $(this).text() + " 逛逛");
    });
    $(".tbCommentBodys").mouseover(function () {
        showMessage("" + visitor + " 向評(píng)論欄出發(fā)吧！");
    });
    $("#submit").mouseover(function () {
        showMessage("確認(rèn)提交了么？");
    });
    $("#s").focus(function () {
        showMessage("輸入你想搜索的關(guān)鍵詞再按Enter(回車(chē))鍵就可以搜索啦!");
    });
    $("#go-prev").mouseover(function () {
        showMessage("點(diǎn)它可以后退哦！");
    });
    $("#go-next").mouseover(function () {
        showMessage("點(diǎn)它可以前進(jìn)哦！");
    });
    $("#refresh").mouseover(function () {
        showMessage("點(diǎn)它可以重新載入此頁(yè)哦！");
    });
    $("#go-home").mouseover(function () {
        showMessage("點(diǎn)它就可以回到首頁(yè)啦！");
    });
    $("#addfav").mouseover(function () {
        showMessage("點(diǎn)它可以把此頁(yè)加入書(shū)簽哦！");
    });
    $("#nav-two a").mouseover(function () {
        showMessage("噓，從這里可以進(jìn)入控制面板的哦！");
    });
    $(".post-category a").mouseover(function () {
        showMessage("點(diǎn)擊查看此分類(lèi)下得所有文章");
    });
    $(".post-heat a").mouseover(function () {
        showMessage("點(diǎn)它可以直接跳到評(píng)論列表處.");
    });
    $("#tho-shareto span a").mouseover(function () {
        showMessage("你知道嗎?點(diǎn)它可以分享本文到"+$(this).attr("title"));
    });
    $("#switch-to-wap").mouseover(function(){
        showMessage("點(diǎn)擊可以切換到手機(jī)版博客版面");
    });
});


//無(wú)聊講點(diǎn)什么
jQuery(document).ready(function ($) {

    window.setInterval(function () {
        msgs = [ "陪我聊天吧！", "好無(wú)聊哦，你都不陪我玩！", "…@……!………", "^%#&*!@*(&#)(!)(", "我可愛(ài)吧！嘻嘻!~^_^!~~","誰(shuí)淫蕩呀?~誰(shuí)淫蕩?，你淫蕩呀!~~你淫蕩！~~","從前有座山，山上有座廟，廟里有個(gè)老和尚給小和尚講故事，講：“從前有座……”"];
        var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i], 8000);
    }, 15000);
});
//評(píng)論資料
jQuery(document).ready(function ($) {
    $("#author").click(function () {
        showMessage("留下你的尊姓大名！");
        $(".spig").animate({
            top: $("#author").offset().top - 70,
            left: $("#author").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#email").click(function () {
        showMessage("留下你的郵箱，不然就是無(wú)頭像人士了！");
        $(".spig").animate({
            top: $("#email").offset().top - 70,
            left: $("#email").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#url").click(function () {

        showMessage("快快告訴我你的家在哪里，好讓我去參觀參觀！");
        $(".spig").animate({
            top: $("#url").offset().top - 70,
            left: $("#url").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#tbCommentBody").click(function () {
        showMessage("認(rèn)真填寫(xiě)哦！不然會(huì)被認(rèn)作垃圾評(píng)論的！我的乖乖~");
        $(".spig").animate({
            top: $("#tbCommentBody").offset().top - 70,
            left: $("#tbCommentBody").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

var spig_top = 50;
//滾動(dòng)條移動(dòng)
jQuery(document).ready(function ($) {
    var f = $(".spig").offset().top;
    $(window).scroll(function () {
        $(".spig").animate({
            top: $(window).scrollTop() + f +300
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

//鼠標(biāo)點(diǎn)擊時(shí)
jQuery(document).ready(function ($) {
    var stat_click = 0;
    $(".mumu").click(function () {
        
            stat_click++;
            if (stat_click > 4) {
                msgs = ["你有完沒(méi)完呀？", "你已經(jīng)摸我" + stat_click + "次了", "非禮呀！救命！OH，My ladygaga"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            } else {
                msgs = ["筋斗云！~我飛！", "我跑呀跑呀跑！~~", "別摸我，大男人，有什么好摸的！", "惹不起你，我還躲不起你么？", "不要摸我了，我會(huì)告訴老婆來(lái)打你的！", "干嘛動(dòng)我呀！小心我咬你！"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            }
        s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
        var i1 = Math.floor(Math.random() * s.length);
        var i2 = Math.floor(Math.random() * s.length);
            $(".spig").animate({
            left: document.body.offsetWidth/2*(1+s[i1]),
            top:  document.body.offsetheight/2*(1+s[i1])
            },
            {
                duration: 500,
                complete: showMessage(msgs[i])
            });
        
    });
});


//顯示消息函數(shù) 
function showMessage(a, b) {
    if (b == null) b = 10000;
    jQuery("#message").hide().stop();
    jQuery("#message").html(a);
    jQuery("#message").fadeIn();
    jQuery("#message").fadeTo("1", 1);
    jQuery("#message").fadeOut(b);
};

//拖動(dòng)
var _move = false;
var ismove = false; //移動(dòng)標(biāo)記
var _x, _y; //鼠標(biāo)離控件左上角的相對(duì)位置
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        _move = true;
        _x = e.pageX - parseInt($("#spig").css("left"));
        _y = e.pageY - parseInt($("#spig").css("top"));
     });
    $(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x; 
            var y = e.pageY - _y;
            var wx = $(window).width() - $("#spig").width();
            var dy = $(document).height() - $("#spig").height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控件新位置
            ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});

參考資料

博客園加上博客精靈

圖片是扒的某一位大佬的但是我忘記他的網(wǎng)址了qwq