在自己的博客里养一只saber吧

其他技术 myhloli 3756次浏览 已收录 42个评论

起先是闲逛到anotherhome,发现博客里有个浮动的芽衣子萌萌哒,遂想自己也在博客里养点什么。于是借(chao)鉴(xi)了他的代码,自己找了张萌萌的狮子saber扣了图,做了自己博客的这个小(rou)宠(bian)物(qi)。
教程anotherhome里有,我再贴一下。下载下面的脚本和素材文件,下载解压后放在网站相应目录下
素材文件
这个脚本需要jQuery库,必须先加载jQuery库(有可能是原来已经加载了,这样就不用设置),您可能需要修改spig.js里面的一些东西,比如里面的一些域名网址提示等。然后把下面代码加到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(),'";'; ?>
<?php if((($display_name = wp_get_current_user()->display_name) != null)) echo 'var visitor="',$display_name,'";'; else if(isset($_COOKIE['comment_author_'.COOKIEHASH])) echo 'var visitor="',$_COOKIE['comment_author_'.COOKIEHASH],'";';else echo 'var visitor="游客";';echo "\n"; ?>
</script>
<script type="text/javascript" src="http://myhloli.com/spig.js"></script>
<style>
.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://myhloli.com/wp-content/themes/loveloli/img/spig.png) no-repeat;}
</style>
<div id="spig" class="spig">
    <div id="message">加载中……</div>
    <div id="mumu" class="mumu"></div>
</div>
<!--.end浮动小人-->

其中这两行代码换成你的路径

<script type="text/javascript" src="http://myhloli.com/spig.js"></script>
.mumu{width:130px;height:170px;cursor: move;background:url(https://myhloli.com/wp-content/themes/loveloli/img/spig.png) no-repeat;}

弄完之后再看下你的博客,是不是出现了奇迹呢 :biggrin:

  萝莉社,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://myhloli.com/feed-a.html
喜欢 (18)
  1. 按照这么做了以后,只有字在飘来飘去,没有小人,图片路径都没有错啊。。

  2. 请问在footer.php里要放的代码中,<?php ……?>这两段的作用是什么?其实我想在jekyll搭建的静态博客里试试能不能用,但是看到有php代码就觉得疑惑了。

    • 链接网络问题,js没加载好。。。。。看看服务器网络或者你本地网络有没有问题,清除下缓存啥的再试试

      • 我测试用你js链接就没事,但是把你文件下载下来无论修改不修改,放我空间和放到七牛都不行!右键保存你js多了些 这种符号,是不是这个影响的?能不能发一分js文件呢?

  3. 这个脚本需要jQuery库,必须先加载jQuery库(有可能是原来已经加载了,这样就不用设置)。 这句话还是没看懂,图片和js我已经修改好了,也上传了,路径也是对应的,能正常显示,但是位置是固定的,不是动态的,右击也没用,只显示了一个加载中,是jquery的问题么?我用的是loper主题,如果是jquery没加载的话,应该在哪个文件里面加载,找了很多文章看了,都是丢出来必须先加载jquery库,但是却没告诉加载到哪个文件里面,还请站长为吾等小白指点下。

加载中……