Internet · November 23, 2014 1

Add clicking EXP effect for blog

Havn’t study English for a long time, I am not sure is it right to call this JS effect as clicking EXP effect. To be honest, I translated it into English from 《为博客添加打怪积分特效》.

Any way, this JS effect is not an essential effect for a blog or a website. I just thought it fun to have such an effect. You can click on any page of my blog to check out the effect. Yeah, it’s useless, I agree. However, I wonder, whether it will drive you crazy if you have OCD (Obsessive-compulsive Disorder).

Here comes the magic code.

The basic code

<script>
jQuery(document).ready(function($) {
$("html,body").click(function(e){
    var n=Math.round(Math.random()*100);//Set ramdon number as EXP
    var $i=$("<b/>").text("+"+n);//Add the number as page element
    var x=e.pageX,y=e.pageY;//Your clicking location
    $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>

This one works on any html / php / asp page.

EXP with a transparent bubble

<script type="text/javascript">
$(function(){
	$("html").click(function(e){
		var n=Math.round(Math.random()*100)+10;
		var $i=$("<b/>").text("+"+n);
		var x=e.pageX,y=e.pageY;
		var color = ["#E94F06","#2d78f4","#cc0000","#FF7500","#0EA535","#30B8C4","#ED40D3","#706E6E","#BC11D2","#00E989","#54FF42","#E9FF42","#FFCA42"];
		$i.css({
			"z-index":99999,
			"top":y-20,
			"left":x,
			"position":"absolute",
			"color":color[Math.round(Math.random()*color.length)],
			//"font-size":Math.round(Math.random()*13)+9
			"padding":"25px 25px 25px 15px",
			"background":"url(http://www.youngfree.cn/wp-content/uploads/2014/10/bubble.png) no-repeat"
		});
		$("body").append($i);
		$i.animate(
			{"top":y-180,"opacity":0},1500,
			function(){$i.remove();
		});
		e.stopPropagation();
	});
});
</script>

However, the above code never works on Twenty Fourteen theme which I am using now. Then I modified the code to the following one.

Modified Code

<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;
	var color = ["#E94F06","#2d78f4","#cc0000","#FF7500","#0EA535","#30B8C4","#ED40D3","#706E6E","#BC11D2","#00E989","#54FF42","#E9FF42","#FFCA42"];
	$i.css({
		"z-index":99999,
		"top":y-20,
		"left":x,
		"position":"absolute",
		"color":color[Math.round(Math.random()*color.length)],
		//"font-size":Math.round(Math.random()*13)+9
		"padding":"25px 25px 25px 15px",
		"background":"url(https://www.yangjingwen.com/wp-content/uploads/2014/11/bubble.png) no-repeat"
		});
	$("body").append($i);
	$i.animate(
		{"top":y-180,"opacity":0},
		1500,
		function(){$i.remove();}
	);
	e.stopPropagation();
});
});
</script>

You can copy and past this code to anywhere you would like to, but I cannot gurantee it will work on all page.

The image of the bubble is hosted on my blog without hot-linking, you can use it directly. And it is hosted by my SSL encrpted domain.

About the credit of the code

This is a myth. I don’t know who the author is and the original source from. The basic code and the second one are recommended by many other bloggers and JS effect recommendation site. If you are the author or you know the author, please let me know, I will give credit on my blog. And THANK YOU, to you, the author or the contributor.