当前位置:首页 > WordPress代码·功能 > 正文

给你的网站加一个浮动小人

最近总是有问“你网站的小人怎么弄得?” 然后我回到js……人后就了无音讯……

首先声明下,这个功能制作者为木木

浮动小人

浮动小人

的图片没有转载哦,不算违规吧!反正我没转载这张图!

下载下面的脚本和素材文件,下载解压后放在网站相应目录下,当然你可以修改下css

这个脚本需要jQuery库,必须先加载jQuery库(有可能是原来已经加载了,这样就不用设置),您可能需要修改spig.js里面的一些东西,比如里面的一些域名网址提示等

jQuery库加载方法:

这里用的百度提供的源,你也可以使用其他的

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

然后把下面代码加到footer.php底部文件中

<!--.浮动小人-->    
<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
更新时间:2014-12-27 14:20:00

 

标签:
上一篇: 下一篇:

71 条评论

评论加载中...
  1. 20楼
    来自天朝的朋友 谷歌浏览器 Windows 10
    我好像没看到代码  

    谢谢,求帮忙,大神

    2016年5月19日 22:37 评论
  2. 19楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    leejon  

    有点小烦人,总是在不经意间跑到她不该去的地方,然后又拖动一边去。

    2016年5月11日 10:17 评论
    • 小幻  

      23333333333

      2016年5月15日 14:12 评论
  3. 18楼
    来自天朝的朋友 谷歌浏览器 Windows 8.1
    思念  

    为什么没动啊?

    2016年3月12日 15:25 评论
    • 小幻  

      应该是jQuery冲突

      2016年3月27日 17:10 评论
  4. 17楼
    来自天朝的朋友 谷歌浏览器 Windows 8.1
    思念  

    喜欢

    2016年3月12日 15:08 评论
  5. 16楼
    来自天朝的朋友 谷歌浏览器 Windows XP
    Akaline  

    一直显示加载中,也没有小人,怎么办啊(具体见网站,点头像)

    2016年1月29日 17:40 评论
    • 小幻  

      没有看到

      2016年1月29日 17:51 评论
  6. 15楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    齐宇  

    请问怎么让浮动小人在移动端不显示呢 手机屏幕小 小人的存在好烦

    2016年1月14日 14:23 评论
    • 小幻  

      加个判断就好了

      2016年1月23日 16:22 评论
  7. 14楼
    来自天朝的朋友 QQ浏览器 Windows 7
    龙少  

    看不到代码啊 :bobo_yiwen:

    2015年12月22日 09:58 评论
    • 小幻  

      文件下载

      2015年12月26日 20:46 评论
  8. 13楼
    来自天朝的朋友 QQ浏览器 Windows 7
    小文  

    代码看不到到的说

    2015年12月12日 21:03 评论
  9. 12楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    帝城博客  

    我好像没看到代码……

    2015年11月14日 16:41 评论
  10. 11楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    金笔头博客  

    网站不错哦,赞一个,记得回访哦

    2015年11月13日 22:20 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……