hexo:raytaylorism主题增加文字点击特效

声明:本文仅限用于学术交流,引用或转载本文时请注明出处!

hexo raytaylorism主题的作者应该已经没有在更新这个主题了,自己想更换主题,但因为最近找工作加实习,确实没有时间来整理。
今天对hexo版本进行了一个升级,顺便给博客增加了一个文字点击特效

代码

click_show_text.js保存到themes\raytaylorism\source\js文件夹下

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
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": s()
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});

function delay() {
$(".buryit").removeAttr("onclick");
}

function s() {
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
}

引入文件

可以先通过在线压缩把JavaScript文件压缩一下
raytaylorism\layout\_partial\after_footer.ejs文件中引入文件,一定要放在jQuery后面引入:

1
2
<!--单击显示文字-->
<script src="<%- config.root %>js/click_show_text.js"></script>

参考文献

wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器