为博客添加两种不同类型的二次元小人儿

live2dw

请先到文章——给自己的jekyll安装一个萌萌哒二次元看板娘-步骤3下载相关文件，挑选好2d模型后，仅需替换掉html代码相关的路径和文件即可。

html代码:

    <!--live2d function-->
    <script src="/assets/live2dw/lib/L2Dwidget.min.js"></script>
    <script>L2Dwidget.init({
        "pluginRootPath": "live2dw/",
        "pluginJsPath": "lib/",
        "pluginModelPath": "assets/",
        "tagMode": false,
        "debug": false,
        "model": {"jsonPath": "/assets/live2dw/assets/unitychan.model.json"},
        "display": {"position": "right", "width": 130, "height": 180, "hOffset": 60, "vOffset": -10,},
        "mobile": {"show": true, "scale": 1,},
        "log": false
    });</script>

效果图如下：

博客园小精灵

参考源：

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

博客园加上博客精灵

效果图如下：

需要的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(http://files.cnblogs.com/files/flipped/spig.gif) no-repeat;
}

js代码（聊天内容在里面修改）：

太长我放文件了，点击此处下载

css文件和js文件我命名为girl.css和girl.js，在下面html文件均有引用

html代码：

<link rel="stylesheet" type="text/css" href="/assets/css/girl.css">

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/tongji.baidu.js"></script>
<script src="/assets/js/girl.js"></script>
<div id="spig" class="spig">
<div id="message">---</div>
<div id="mumu" class="mumu"></div>
</div>
<script type="text/javascript">
var isindex=true;
var title="";
</script>

至此，博客小精灵就能出现在界面了

两个角色随机出现

两个角色都成功生成了，但同时出现会显得界面很杂乱，过于花哨。那么该怎么作选择呢？

小孩子才做选择，我当然是全都要。既然不能同时出现，那一次只随机出现一位角色就好了。由于两个角色实现的原理方法不同，所以作的处理也不同。

博客园精灵可以通过style.display=”none”进行隐藏，html代码如下：

<div id=abc>
    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/tongji.baidu.js"></script>
    <script src="/assets/js/girl.js"></script>
    <div id="spig" class="spig">
    <div id="message">---</div>
    <div id="mumu" class="mumu"></div>
    </div>
    <script type="text/javascript">
    var isindex=true;
    var title="";
    </script>
</div>
<script>
    var obj=document.getElementById("abc")
    hidAll()
    function hidAll(){ obj.style.display="none"}
</script>

而live2dw人物一旦初始化，就无法隐藏或删除，于是单独写了个js控制其生成和修改博客园display参数。

jQuery(document).ready(function ($) {
    showMe(Random())
    function Random(){return new Date().getSeconds()%2}
    function showMe(r){
        var r;
        if (r==1){
            L2Dwidget.init({        
            "pluginRootPath": "live2dw_shizuku/",
            "pluginJsPath": "lib/",
            "pluginModelPath": "assets/",
            "tagMode": false,
            "debug": false,
            "model": {"jsonPath": "/assets/live2dw/live2dw_shizuku/assets/shizuku.model.json"},
            "display": {"position": "right", "width": 90, "height": 150, "hOffset": 100, "vOffset": -10,},
            "mobile": {"show": false,scale: 0.5,},
            "log": false});
        }
        if (r==0) {
            var obj=document.getElementById("abc")
            obj.style.display=""
        }
    }
});

即可实现每次刷新网页随机出现一名角色，并且二随机一实现了，三随机一，十随机一也都是可以的，前面下载live2dw的模型很多，感兴趣的朋友可以试试。

未能解决的问题

~~手机端的朋友肯定已经注意到了，手机端只显示博客园的小精灵，不显示live2dw人物。~~

这是因为live2dw模型在电脑上正常显示时，手机上显得很大，目前没有找到仅缩放手机端模型大小的方法。为了不影响阅读，只好关闭live2dw手机端的显示。

~~这个小遗憾就暂且留在这篇博文和博客园小精灵的话里吧，以后有机会再解决。~~