• 本博客已正式上线 IPv4 + IPv6 双栈访问

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

分享转载 Young Free! 9年前 (2014-10-12) 3024次浏览 6个评论 扫描二维码

> 分享转载 > 为博客添加”打怪”积分特效

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

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

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

为博客添加

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

 

<script>
/*-------------------------------------------------*/
/*  在页面上单击时,出现积分的特效
/*-------------------------------------------------*/
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>

 


Young Free! , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:为博客添加”打怪”积分特效
喜欢 (1)
[]
分享 (0)
关于作者:
欢迎来吐槽,也欢迎一起交流。如果无法在本文下评论,可以点击信封按钮,给我发送邮件。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!


请文明发言,谢谢。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 这些天一直在思考,自己的博客主题(Thoughts/Views, and topics)是很么,想了很多,却也没个结果。这些天也逛了上百个博客,依旧没能帮助自己做个定论。逛的多了,倒也激起了折腾劲儿。优化了博客主题(WP Theme)性能,做了移动适配,优化了移动设备的访问体验。当然,也作死的添加了一个没什么意义的特效。
    足球论坛2014-11-03 13:03 回复
  2. 这特效不错,先收藏了
    爱奇趣—分享精选奇闻趣事2014-10-23 17:14 回复
    • 喜欢就拿去吧,不过不知道原作者是谁
      Young Free!2014-10-23 19:18 回复
  3. 使劲的点会不会拖死服务器呢?
    歌词大全geciwa.com2014-10-17 08:09 回复
    • 不会拖死服务器,只会累死鼠标
      Young Free!2014-10-17 21:11 回复
    • 贵博客不知什么原因,一直提示我发言过于频繁,无法留下评论。我就把评论发布在这里吧:“现在做纯粹的歌词博客没多大吸引力了,毕竟歌词下载已经很智能了,几乎任何播放器都自带了。如果能加点歌词赏析可能会更有吸引力。”
      Young Free!2014-10-17 21:18 回复