360截图20171124221439529.jpg


效果如上图,其实这个易云早在1年多之前就分享过,后来部分文章在搬家过程中损失了,其中就有这文章。。。

现在重新分享下,这个源码使用很简单,其实有男生版和女生版,这个是女生版,也就是图片不同而已。。。

首先需要加载下下面的JS即可实现,代码如下:

<!--.浮动小人-->    
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<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="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(小人图片地址) no-repeat;}
</style>
<div id="spig" class="spig">
<div id="message">加载中……</div>
<div id="mumu" class="mumu"></div>
</div>
<!--.end浮动小人-->

然后把这个资源包上传到你的空间根目录,再按要求修改下代码里的【JS文件地址】和【小人图片】地址即可

资源包已经为大家准备好啦!百度云链接: https://pan.baidu.com/s/1pKRkex1   密码: hc3x

易云博客旗下

评论关闭

分享到:

【免费空间】主机屋免费续期的高质量免费空间又来了