^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

给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://dy.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;}
}
历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

评论 10

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 黄小蚊
    早期有JS冲突 还折腾了一少时间回复
  2. xq
    博主,我那个小人加上去为啥只有博客首页才有,别的页面内都没有啊回复
    • 陌小雨网站管理员
      @xq 看了下 你的js没有正确加载回复
  3. 上海seo
    小雨棒棒哒!! :mrgreen:回复
1 2

登录

忘记密码 ?

切换登录

注册