为博客添加"打怪"积分特效

继续写博不是一件容易的事，继续折腾似乎轻松很多。

这些天一直在思考，自己的博客主题(Thoughts/Views, and topics)是什么，想了很多，却也没个结果。这些天也逛了上百个博客，依旧没能帮助自己做个定论。逛的多了，倒也激起了折腾劲儿。优化了博客主题(WP Theme)性能，做了移动适配，优化了移动设备的访问体验。当然，也作死的添加了一个没什么意义的特效。

特效效果如图所示，在点击鼠标时，会有打怪涨积分一样的数字冒出来。

为博客添加

代码如下，只要添加到页面底部</body>之前即可。

&lt;script&gt;
/*-------------------------------------------------*/
/*  在页面上单击时，出现积分的特效
/*-------------------------------------------------*/
jQuery(document).ready(function($) {
$("html,body").click(function(e){
	var n=Math.round(Math.random()*100);//随机数
	var $i=$("&lt;b/&gt;").text("+"+n);//添加到页面的元素
	var x=e.pageX,y=e.pageY;//鼠标点击的位置
	$i.css({
		"z-index":99999,
		"top":y-20,
		"left":x,
		"position":"absolute",
		"color":"#E94F06"
	});
	$("body").append($i);
	$i.animate(
		{"top":y-180,"opacity":0},
		1500,
		function(){$i.remove();}
	);
	e.stopPropagation();
});
});
&lt;/script&gt;

/*-------------------------------------------------*/

/* 在页面上单击时，出现积分的特效

/*-------------------------------------------------*/

jQuery(document).ready(function($) {

$("html,body").click(function(e){

var n=Math.round(Math.random()*100);//随机数

var $i=$("<b/>").text("+"+n);//添加到页面的元素

var x=e.pageX,y=e.pageY;//鼠标点击的位置

$i.css({

"z-index":99999,

"top":y-20,

"left":x,

"position":"absolute",

"color":"#E94F06"

});

$("body").append($i);

$i.animate(

{"top":y-180,"opacity":0},

1500,

function(){$i.remove();}

);

e.stopPropagation();

});

</script>

这些天一直在思考，自己的博客主题(Thoughts/Views, and topics)是很么，想了很多，却也没个结果。这些天也逛了上百个博客，依旧没能帮助自己做个定论。逛的多了，倒也激起了折腾劲儿。优化了博客主题(WP Theme)性能，做了移动适配，优化了移动设备的访问体验。当然，也作死的添加了一个没什么意义的特效。

足球论坛2014-11-03 13:03 回复

这特效不错，先收藏了

爱奇趣—分享精选奇闻趣事2014-10-23 17:14 回复

喜欢就拿去吧，不过不知道原作者是谁
Young Free!2014-10-23 19:18 回复

使劲的点会不会拖死服务器呢？

歌词大全geciwa.com2014-10-17 08:09 回复

不会拖死服务器，只会累死鼠标
Young Free!2014-10-17 21:11 回复
贵博客不知什么原因，一直提示我发言过于频繁，无法留下评论。我就把评论发布在这里吧：“现在做纯粹的歌词博客没多大吸引力了，毕竟歌词下载已经很智能了，几乎任何播放器都自带了。如果能加点歌词赏析可能会更有吸引力。”
Young Free!2014-10-17 21:18 回复

为博客添加”打怪”积分特效

Hi，您需要填写昵称和邮箱！