给博客园加一个会动的小人-spig.js

给博客园加一个会动的小人-spig.js

效果大概是这样，感觉十分可爱qvq

那么怎么添加呢？

首先需要开通js/html权限。

然后在页脚html代码中加入以下代码

……

在侧边栏css中加入以下代码(注意有个地方需要自己填图片地址)

.spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;}
#message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-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;}

上面链接内的js文件如下，里面有一些地方需要自己修改。

顺便吐槽一句，原作者给的api都挂的差不多了，然鹅我是个js菜鸡连get/post都不会，所以凑合着改了一下api，欢迎各位大佬给出更好的解决方案qwq

//右键菜单
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage("秘密通道:
    [object Object]
自为风月马前卒  ",10000);
}
});
$("#spig").bind("contextmenu", function(e) {
    return false;
});
});

//鼠标在消息上时
jQuery(document).ready(function ($) {
    $("#message").hover(function () {
       $("#message").fadeTo("100", 1);
     });
});


//鼠标在上方时
jQuery(document).ready(function ($) {
    //$(".mumu").jrumble({rangeX: 2,rangeY: 2,rangeRot: 1});
    $(".mumu").mouseover(function () {
       $(".mumu").fadeTo("300", 0.3);
       msgs = ["我隐身了，你看不到我", "我会隐身哦！嘿嘿！", "别动手动脚的，把手拿开！", "把手拿开我才出来！"];
       var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    $(".mumu").mouseout(function () {
        $(".mumu").fadeTo("300", 1)
    });
});


//开始
jQuery(document).ready(function ($) {
    if (isindex) { //如果是主页
        var now = (new Date()).getHours();
        if (now > 0 && now

标签：function,mumu,博客园,js,spig,5px,border
来源： https://blog.51cto.com/u_15239936/2866482