在很多的网站上都看见过这种效果,于是自己也想试试。看见我网站上的小宠物了吗,就是这种效果。
不多说,方法如下:
工具:
下载地址:http://yunpan.cn/cFUmZB8WWthty 访问密码 8c20
里面包含了jQury库,一个js文件和两张图片,图片你任选一种就可以,不过注意代码中图片的扩展名要修改一下
步骤:
一、HTML:
在主题的footer.php 文件下(一般是前)加入以下代码:
1 2 3 4 |
|
二、CSS:
将下载得到的spig.png或者spig.gif(任选其一)放在主题的images文件夹里(应该都有吧?),当然所有代码都可以自定义路径,后面不
再累赘。然后在主题的style.css 文件下加入以下代码:(当然你可以自己修改,下面的代码都是我自己修改过的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
懂css 代码的话可以修改一下message这个id,使得更加适合你的主题,也避免id冲突的可能性。
三、加载jQuery库:
可以自己去官网下载,也可以用我压缩包里面的。然后在header.php或者footer.php中引入jQuery库即可。
1 |
|
四、JS:
在添加js文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的”替换”工具将www.shenjieblog.com替换为你的网址,不过可以的话最好自己来手动替换,然后最好更改一些文字,比如我的名字。
接着,同样是在主题的footer.php 文件下(一般是前),加入以下代码:
1 2 3 4 5 |
|
上面代码的spig.js 路径是在主题目录的js目录下,你可以自定义路径。
PS:其实原来的js代码中还提供了播报天气的功能,不过因为播报天气的那个网站现在访问不了的关系,所以我已经把那么功能的代码注释掉了。但是我在郑子
帅的博客上面看见还是有播报天气的功能,不过对我来说可能并不需要这个,所以也就没有折腾了!还有就是js文件中有些功能有时候没有效果,是因为js文件
中的id的名字可能和你的主题的id不一样,如果功能没有效果的话需要手动修改成你主题对应的id即可。
搞定!