您现在的位置:爱折腾>> web>>正文内容

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

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

首先声明下,这个功能制作者为木木,然后我现在使用的小人图则是由Anotherhome扣的。

因为不让动小人图像,我只好使用了他css链里

浮动小人

浮动小人

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

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

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

jQuery库加载方法:

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

  1. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"> 
  2. </script><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 

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

  1. <!--.浮动小人-->      
  2. <script type="text/javascript"> 
  3. <?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="',  get_the_title(),'";'; ?> 
  4. <?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"; ?> 
  5. </script> 
  6. <script type="text/javascript" src="http://hsdate.qiniudn.com/spig.js"></script> 
  7. <style> 
  8. .spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;z-index:9999;}  
  9. #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;}  
  10. .mumu{width:130px;height:170px;cursor: move;background:url(http://ihuan.me/wp-content/themes/ckoo/images/spig.png) no-repeat;}  
  11. </style> 
  12. <div id="spig" class="spig"> 
  13.     <div id="message">加载中……</div> 
  14.     <div id="mumu" class="mumu"></div> 
  15. </div> 
  16. <!--.end浮动小人--> 

将代码中 http://ihuan.me/spig.js和http://ihuan.me/wp-content/themes/ckoo/images/spig.png换成你自己的路径,当然你直接使用也用不了的!因为我压根没存在这里的路径,我直接弄到七牛去了!

相关文章