WordPress宠物!

有不少网友问我关于我博客上的那个飞来飞去的小人怎么制作的问题,这里分享一下:

使用方法:

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

配合修改的地方:

1、在footer.php的前加入如下HTML代码:

2、接着在你的style.css里面添加如下css代码:

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

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

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

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

OVER!就是这么弄的,大家都可以用了,赶紧上手吧
关于怎么自定义显示的消息,用jQuery选择器加上showMessage('信息')即可

看下效果

这个效果不是我原创的,最初是谁弄的不知道了,木木,乱了感觉,然后是……
每个使用都有一次修改,不断改善……
希望用了的留个印,仅此而已,不愿的也不强求,只是想知道有多少人真想要的,也不枉我发出来!




评论 (23)

  1. 沙发
    bluecode 2015-03-04 09:42

    不会弄啊?可以详细点吗?小白

  2. 板凳
    滕然凌若 2014-01-11 06:13

    博主能详细教教我吗

  3. 地板
    Em 2013-02-25 07:35

    谢谢分享哦!

  4. 4 楼
    Adoing 2013-02-02 08:15

    @cwisme
    这个就是这样的,点击后它会自动跑消失掉,你滑动它又会了出来

  5. 5 楼
    cwisme 2013-02-02 08:08

    你的小人会 自行跑出当面显示页面。用下面这个 无聊动动的代码 他只会在当前显示页面跑来跑去,而不会跑得看不见了。

    //无聊动动
    jQuery(document).ready(function ($) {
    window.setInterval(function () {
    msgs = [“乾坤大挪移!”, “我飘过来了!~”, “我飘过去了”, “我得意地飘!~飘!~”];
    var i = Math.floor(Math.random() * msgs.length);
    var left=document.body.offsetWidth*Math.random(),top=$(window).height()*Math.random();
    left = (document.body.offsetWidth – left) < 160 ? document.body.offsetWidth – 160 : left;
    top = ($(window).height() – top) < 40 ? 40 : (top < 200 ? $(window).height()-200 : $(window).height()-top);
    $(".spig").animate({
    left: left,
    top: top + $(window).scrollTop()
    },
    {
    duration: 2000,
    complete: showMessage(msgs[i])
    });
    }, 50000);
    });

  6. 6 楼
    cwisme 2013-02-02 08:08

    你的小人会 自行跑出当面显示页面。用下面这个 无聊动动的代码 他只会在当前显示页面跑来跑去,而不会跑得看不见了。

  7. 7 楼
    Adoing 2013-01-29 10:39

    @cwisme
    这都被你发现了,~_~

  8. 8 楼
    cwisme 2013-01-02 06:01

    var left=document.body.offsetWidth*Math.random(),top=document.body.offsetHeight*Math.random();
    left = (document.body.offsetWidth – left) < 160 ? document.body.offsetWidth – 160 : left;
    top = (document.body.offsetHeight – top) < 40 ? 40 : (top < 200 ? document.body.offsetHeight-200 : document.body.offsetHeight-top);
    $(".spig").animate({
    left: left,
    top: top
    }

  9. 9 楼
    cwisme 2013-01-02 04:48

    我看了一下 你的JS 里面 offsetHeight 写错了,写成了 offsetheight

  10. 10 楼
    c575藏库 2013-01-01 07:01

    博主你 好 第三点 “ 在你的前添加代码” 请我 这个是在哪个文件下的??

  11. 11 楼
    admin 2012-12-10 10:56

    @爱扒饭
    应该是跟你主题JS冲突了,个例情况

  12. 12 楼
    爱扒饭 2012-12-10 09:14

    楼主你好,我按照你的方法操作,出现以下错误:
    Uncaught TypeError: Cannot read property ‘top’ of null spig.js:59
    (anonymous function) spig.js:59
    e.resolveWith jquery.min.js:16
    e.extend.ready jquery.min.js:16
    c.addEventListener.z

    操作好几遍了,为什么呢?是跟主题冲突吗

  13. 13 楼
    体验盒子 2012-08-18 10:40

    @tabyouto
    RSS图片? 这个好像没用到RSS图片额~~

  14. 14 楼
    tabyouto 2012-08-18 09:05

    成功完成copy,感谢博主,只不过还缺了那个rss的图片啊,放图出来吧。

  15. 15 楼
    burn.so 2012-06-28 14:35

    一直关注着·期待主题出阁~~~~

  16. 16 楼
    airoschou 2012-06-28 07:50

    这东西不错,但又时会出来很多个。。。

  17. 17 楼
    adoing 2012-06-27 14:52

    @Beautyleg
    你站资源太好了,是不是要收藏一下~_~

  18. 18 楼
    Beautyleg 2012-06-27 14:34

    搞个女的比较给力

  19. 19 楼
    Beautyleg 2012-06-27 14:34

    好吧,创意无限啊

  20. 20 楼
    Adoing 2012-06-27 08:38

    @风叶涧
    额,这个,检查是否真按我方法操作了,同时要检查兼容问题,每个主题不一样,没你URL

  21. 21 楼
    风叶涧 2012-06-27 08:18

    博主,我非常喜欢这个宠物 。。。。。。可是,,,按照方法做完之后,还是木有。。应该是哪错了。诶

  22. 22 楼
    Adoing 2012-06-27 07:58

    @风叶涧
    在</body>前加上代码,抱歉这个符号被转义了,已修正!

  23. 23 楼
    风叶涧 2012-06-27 07:55

    文中多次提到”在你的前加上代码” 请问,,,在我的哪个前面啊。。。。好多处。。