^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望可以帮到你
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

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

阿里云服务器9.9

浮动小人很有爱:

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

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来
小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 黄小蚊
    早期有JS冲突 还折腾了一少时间
  2. xq
    博主,我那个小人加上去为啥只有博客首页才有,别的页面内都没有啊
    • 陌小雨网站管理员
      @xq 看了下 你的js没有正确加载
  3. 上海seo
    小雨棒棒哒!! :mrgreen:
  4. 米粒博客
    漂亮 赞一个
  5. kk
    你们的评论栏搞的真好。前面根据张戈的教程搞了一晚上还是没弄好,显示是能显示,到显示的图片跟头像一样大,而且也不在名称后面,真是苦了我这小白,不知博主,有好的方法吗?教教。谢谢
    • 陌小雨网站管理员
      @kk 以后有机会会分享
  6. kk
    奇怪,用手机打开你的网站就显示一个logo,下面都是空白,这是神马情况。
    • 陌小雨网站管理员
      @kk 在调试一些东西
  7. Han
    好萌,好想拿来做头像
  8. 森林之家
    很萌可爱有空要试试哈哈
  9. 淘站目录网站提交
    挺可爱的,收藏了
  10. 重庆企业邮箱
    感觉现在很多个人网站上都弄了这个小玩意,不过看着挺漂亮的

登录

忘记密码 ?

切换登录

注册