给xiu主题添加一个浮动小人

Author: 陌小雨Date: 2016-02-23View: 107

浮动小人很有爱:

1、js

另存为js,引用或者合并到主题的js文件中

2、下面代码加到 footer.php 底部文件 body 标志前

<script type="text/javascript">
<?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="',  get_the_title(),'";'; ?>
</script>
<div id="spig" class="spig"><div id="message">加载中……</div><div id="mumu" class="mumu"></div></div>

3、加载css

/*浮动小人*/
.spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;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:130px;height:170px;cursor: move;background:url(https://dedewp.com/wp-content/themes/xiu2.1/images/spig.png) no-repeat;}

4、浮动小人素材下载

浮动小人素材1

spig2

spig3

spig4 spig5 spig6 spig7

5、折腾版本(加入一言,方法来自:https://myhloli.com/hitokoto.html)

(1)找到第1步代码中的

msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];

修改为:

//msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
msgs = [$("#hitokoto").text()];

(2)在第2步代码后面加上

<span class="hitokoto" id="hitokoto" style="display:none">Loading...</span>
       <div id="hjsbox" style="display:none">
        </div>
    <script>
            setTimeout("getkoto()",1000);
            var t;
            function getkoto(){
                var hjs = document.createElement('script');
                hjs.setAttribute('id', 'hjs');
                hjs.setAttribute('src', 'http://api.hitokoto.us/randuid=3221&encode=jsc&fun=echokoto');
                document.getElementById("hjsbox").appendChild(hjs);
                t=setTimeout("getkoto()",2000);
            }
            function echokoto(result){
                var hc = eval(result);
                document.getElementById("hitokoto").innerHTML = hc.hitokoto;
            }
    </script>

6、人性化设置

考虑到移动端屏幕大小,还是把移动小人设置为隐藏吧,有助于用户体验,加入下面css即可:

@media (max-width:560px){
    .spig{display: none;}
}