给WordPress网站加一个博客宠物,漂浮的小人,增加用户粘性,提高用户体验

最近发现浮动小人挺火的,让网站显得更有互动性,让人耳目一新,所以。。。

原作者并不是我,好像是木木写的。

QQ图片20150617233106

下载文章结尾处的脚本和素材文件,下载解压后放在网站相应目录下。

这个脚本需要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://www.nafanlong.com/wp-content/themes/Always/js/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(http://www.nafanlong.com/wp-content/themes/Always/images/spig.png) no-repeat;}
</style>
<div id="spig" class="spig">
    <div id="message">正在赶回来……</div>
    <div id="mumu" class="mumu"></div>
</div>
<!--.end浮动小人-->

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

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

还有js文件有些东西根据需要自己修改(比如小人说的话),都可以自行修改,比如右键点小人出现的快捷链接:

1

其中的网站url记得改成自己的

QQ图片20150617235342

以及

QQ图片20150618001753

脚本和素材文件的百度云下载地址:脚本素材下载

更多小人素材(我特别加工制作的)链接:http://pan.baidu.com/s/1qXRXnxa 密码:c3sa

7 COMMENTS
  1. 2015/06/25
    咚门

    这个之前在一个妹子的博客也见到过,和主题配套的特别漂亮。

  2. 2015/07/25
    CyberThink

    就我个人认为,这么些东西会极大地拖慢响应速度(Especially在速度慢的手机上),之前看残月博客(84sec.com)就是有些过于花哨了,影响了博客的“纯粹性”

    • 2016/03/08
      那樊笼
      @CyberThink 是这样没错,我也就是玩一玩新鲜新鲜~
    • 2016/03/26
      那樊笼
      @CyberThink 因为网站内容比较少,不太吃速度,所以加了玩玩。
  3. 2016/06/01
    小刘

    网站主题是啥,挺清新的

LEAVE A REPLY
loading
正在赶回来……