首页 > Wordpress > 漂浮小飞人

漂浮小飞人

大家应该可以看到博客中漂浮的小飞人了,这个东东是在别人的博客中看到的,后面按照他的提示,在自己的博客上尝试成功了。下面将方法写一下,以免遗忘。

以下所有内容均来自互联网,如有侵犯,请告之,我会及时删除。谢谢。

1、添加jQuery库,已经添加过的可以忽略此步。在 header.php 中加入如下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

2、在 footer.php 中,之前加入如下代码:

<!-- feiren  spig -->
<div id="spig" class="spig">
<div id="message">加载中……</div>
<div id="mumu" class="mumu"></div>
</div>

3、将下面的压缩包下载下来,解压后,将里面的js和图片放到主题目录下合适的位置,例如我就将spig.js放到了主题目录下的js目录里,将图片放到了主题目录下的img目录下;
spig.zip (841)

4、在 style.css 的最后,加入如下代码:

/* 博客宠物 */
.spig {display:block;width:150px;height:190px;position:absolute;top: -200px;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:-30px;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:150px;height:190px;cursor: move;background:url(img/spig.png) no-repeat;}

需要注意的是,在代码最后一行中,url很关键,一定写好图片的路径。

5、在 header.php 的前加入如下代码,我是直接写在了jQuery代码的下面:

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

6、继续在 header.php 中,也就是在上面代码下面,再继续加入如下代码:

<script type="text/javascript" src="spig.js的路径"></script>

这点也非常重要,如果js路径设置不对,肯定看不到效果的。

图片可以自己随便换,只要路径什么的设置对就行了,最好使用png的,背景是透明的。



转载本站文章请注明,来自: Edward's Blog

本文链接: http://www.edward-han.com/311.html

分类: Wordpress 标签: ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
您必须启用 javascript 才能在这儿看到验证码!

无觅相关文章插件,快速提升流量

加载中……