这破站 给博客加上浮动小人
偶然在幻杀博客中看到这个小玩意，看着不错，扒一个~~!
参考链接：
注意！！本博客的小人不会动，被我固定在右下角，在阅读本文前应先阅读参考链接或者github资源，本文只是在其之上的修改。
找原作者木木博客的时候，在一个基佬（DIYgod）的博客中也发现了一篇教程，似乎更详细些，不过这个基佬现在的小人是用canvas画的。如下，看着就没食欲，鼠标点击也没反应，就只有跟着鼠标转头这破功能。我不要，谁爱要自己扒去~~!
update > 2017-11-17:应该是用了live2d技术的图片，demo可以参考：https://github.com/EYHN/hexo-helper-live2d
原来飘来飘去的虽然好玩，可是没什么卵用。而且原来的js中有很多是用于WordPress博客的，于是稍微改了改，现在改成了Typecho，完美不报错。我想把尽可能多的辅助功能全部放到这个小人身上，目前就这样，有什么想法的时候再改动吧。
小人被固定在右下角，不会再飘了(用了CSS的fixed，示例如下图)，因为我觉得飘来飘去不符合我博客的风格。
说的话也被删减改了不少。增加了点击返回顶部的功能，因为我觉得没必要单独再搞一个返回顶部的插件了。
我修改之后的spig.js如下，当然也可以直接F12扒就是了。
/*作者木木http://www.dao-gu.com*/
//右键菜单
jQuery(document).ready(function ($) {
$("#spig").mousedown(function (e) {
if(e.which==3){
showMessage("左键点我可以返回顶部哦^_^",10000);
}
});
$("#spig").bind("contextmenu", function(e) {
return false;//右键不弹出菜单
});
});
//鼠标在上方时
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 <= 6) {
showMessage(' 你是夜猫子呀？还不睡觉，明天起的来么你？', 6000);
} else if (now > 6 && now <= 11) {
showMessage(' 早上好，早起的鸟儿有虫吃噢！早起的虫儿被鸟吃，你是鸟儿还是虫儿？^_^', 6000);
} else if (now > 11 && now <= 14) {
showMessage(' 中午了，吃饭了么？不要饿着了，饿死了谁来挺我呀！', 6000);
} else if (now > 14 && now <= 18) {
showMessage(' 下午的时光真难熬！还好有你在！', 6000);
} else {
showMessage(' 来呀，快活啊！', 6000);
}
}
else {
showMessage(' 欢迎来到这破站，我是妮露', 6000);
}
});
//鼠标在某些元素上方时
jQuery(document).ready(function ($) {
$('h2 a').click(function () {//标题被点击时
showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》请稍候');
});
$('h2 a').mouseover(function () {
showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇文章么？');
});
$('.page-navigator .prev a').mouseover(function(){
showMessage('要翻到上一页吗?');
});
$('.page-navigator .next a').mouseover(function(){
showMessage('要翻到下一页吗?');
});
$('.comments').mouseover(function () {
showMessage('向评论栏出发吧！');
});
$('#submit').mouseover(function () {
showMessage('确认提交了么？');
});
$('input[name="s"]').focus(function () {
showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!');
});
});
//无聊讲点什么
jQuery(document).ready(function ($) {
var lastRandom = 0;
window.setInterval(function () {
msgs = ["我全名是妮莉艾露·杜·欧德修凡克，记住了吗^_^", "需要我做点什么吗？", "每个不曾起舞的日子都是对生命的辜负", "便纵有千种风情，更与何人说？", "…@……!…#$……%@", "我可爱吧！嘻嘻!~^_^!~~","今人不见古时月，今月曾经照古人。","东风夜放花千树。更吹落、星如雨。"];
var i = Math.floor(Math.random() * msgs.length);
while(i == lastRandom) {//确保和上次的话不一样
var i = Math.floor(Math.random() * msgs.length);
}
lastRandom = i;
showMessage(msgs[i], 10000);
}, 35000);
});
//评论资料
jQuery(document).ready(function ($) {
$("#author").click(function () {
showMessage("留下你的尊姓大名！");
});
$("#mail").click(function () {
showMessage("用了Gravatar，所以留下邮箱，不然就是无头像人士了！");
});
$("#url").click(function () {
showMessage("快快告诉我你的家在哪里，好让我去参观参观^_^");
});
$("#textarea").click(function () {
showMessage("认真填写哦！不然会被认作垃圾评论的！我的乖乖~");
});
});
//鼠标点击时
jQuery(document).ready(function ($) {
$(".mumu").click(function () {
$('body,html').animate({scrollTop:0},300);//0.3S回到顶部
});
});
//显示消息函数
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);
};修改之后的页面的CSS和JavaScript如下，需要注意的是，由于浮动小人在低分屏下显示说话内容的效果并不好，所以低分屏下直接屏蔽了小人的显示(我这里设置的是width最小要是1024px才显示小人)。
<!-- 浮动小人 -->
<script type="text/javascript" src="/usr/themes/default/js/spig.js"></script>
<div id="spig" class="spig">
<div id="message">加载中……</div>
<div id="mumu" class="mumu"></div>
</div>
<style>
.spig{width:0px;height:0px;}#message{width:0px;text-indent:-9999px;/*隐藏文字*/}.mumu{width:0px;height:0px;}
@media only screen and (min-width: 1024px) {
.spig {display:block;width:100px;height:170px;position:fixed;bottom: 0px;right:0px;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;right:0px;bottom:165px;position:fixed;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;text-indent:0px/*显示文字*/}
.mumu{width:100px;height:180px;cursor:pointer;background:url(/usr/themes/default/img/spig.png);background-size:100px 180px; no-repeat;}}
</style>
<!--.end浮动小人-->首页需要加上这么一句，如果不想加可以直接把相关判断的js改改就行了。
<script type="text/javascript">isindex = true;</script>我加在了index.php里面
最终的效果就见本博客右下角就行了。