^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

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

浮动小人很有爱:

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、浮动小人素材下载

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

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

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

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

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;}
}

赠人玫瑰,手有余香。