现在的位置: 首页 > 综合 > 正文

博客浮动宠物

2013年09月02日 ⁄ 综合 ⁄ 共 1698字 ⁄ 字号 评论关闭

这个不是我的首创,也看到过其他小人外形的,但总觉得这个比伪春菜的插件要好一点,如果你想要就来看看拿去吧,免去上百度麻烦的查找了。

使用方法:

1、下载提供的脚本包spig.Zip(JS一枚,图片一张),下载后放在主题相应目录下;
2、这个脚本需要jQuery库,必须先加载jQuery库,您可能需要修改spig.js里面的一些东西,比如里面的一些域名网址提示等;


 配合修改的地方:
1、在footer.php的/body前加入如下HTML代码:

1 <pre><div id="spig">
2 <div id="message">加载中……</div>
3 <div id="mumu"></div>
4 </div></pre>
5 <pre>

2.接着在你的css文件中添加如下代码

<pre>/* 博客宠物 */
.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(images/spig.png) no-repeat;}</pre>
<pre>

 

注意要把下载得到的spig.png放在主题的images文件夹里,当然了,修改路径也是可以的。

3、然后,加载jQuery库,如果你已经加载过直接无视!在你的</body>前添加代码:

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

 

4、对于WordPress用户,在上面的代码下面添加如下代码,非WordPress版的我不清楚:

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

 


5、然后在上面代码下面添加代码即可:

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

 

自定义显示的消息,用jQuery选择器加上showMessage('信息')即可,效果看本站。

 

抱歉!评论已关闭.