Skip to content

Instantly share code, notes, and snippets.

@prinsss
Last active November 3, 2016 05:02
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prinsss/63662dc94ff250123edb18fef454b2a5 to your computer and use it in GitHub Desktop.
Save prinsss/63662dc94ff250123edb18fef454b2a5 to your computer and use it in GitHub Desktop.
Click the element to show a "+1" animation and change the content of the element to a new kaomoji. Just for fun :)
#kaomoji {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.info-rise {
z-index: 99999;
position: absolute;
padding: 0 4px;
border-radius: 1px;
background-color: #f69;
box-shadow: 0 0 1px rgba(0,0,0,0.1);
color: #fff;
text-align: center;
font-size: 12px;
line-height: 1.5;
cursor: default
}
<a title="点我点我" id="kaomoji">(´・ω・`)</a>
var kaomoji_array = ["|∀゚", "(´゚Д゚`)", "(;´Д`)", "(`・ω・)", "(=゚ω゚)=", "| ω・´)", "|-` )", "|д` )", "|ー` )", "|∀` )", "(つд⊂)", "(゚Д゚≡゚Д゚)", "(^o^)ノ", "(|||゚Д゚)", "( ゚∀゚)", "( ´∀`)", "(*´∀`)", "(*゚∇゚)", "(*゚ー゚)", "( ゚ 3゚)", "( ´ー`)", "( ・_ゝ・)", "( ´_ゝ`)", "(*´д`)", "(・ー・)", "(・∀・)", "(ゝ∀・)", "(〃∀〃)", "(*゚∀゚*)", "( ゚∀。)", "( `д´)", "(`ε´ )", "(`ヮ´ )", "σ`∀´)", " ゚∀゚)σ", "゚ ∀゚)ノ", "(╬゚д゚)", "(|||゚д゚)", "( ゚д゚)", "Σ( ゚д゚)", "( ;゚д゚)", "( ;´д`)", "( д ) ゚ ゚", "( ☉д⊙)", "((( ゚д゚)))", "( ` ・´)", "( ´д`)", "( -д-)", "(>д<)", "・゚( ノд`゚)", "( TдT)", "( ̄∇ ̄)", "( ̄3 ̄)", "( ̄ー ̄)", "( ̄ .  ̄)", "( ̄皿 ̄)", "( ̄艸 ̄)", "( ̄︿ ̄)", "( ̄︶ ̄)", "ヾ(´ω゚`)", "(*´ω`*)", "(・ω・)", "( ´・ω)", "(`・ω)", "(´・ω・`)", "(`・ω・´)", "( `_っ´)", "( `ー´)", "( ´_っ`)", "( ´ρ`)", "( ゚ω゚)", "(o゚ω゚o)", "( ^ω^)", "(。◕∀◕。)", "/( ◕‿‿◕ )\\", "ヾ(´ε`ヾ)", "(ノ゚∀゚)ノ", "(σ゚д゚)σ", "(σ゚∀゚)σ", "|д゚ )", "┃電柱┃", "゚(つд`゚)", "゚Å゚ ) ", "⊂彡☆))д`)", "⊂彡☆))д´)", "⊂彡☆))∀`)", "(´∀((☆ミつ"];
var hits = 0;
$('#kaomoji').click(function(e) {
index = Math.floor(Math.random() * kaomoji_array.length);
$(this).html(kaomoji_array[index]);
hits ++;
x = $(this).offset().left + $(this).width();
y = $(this).offset().top + $(this).height();
hit = $('<span class="info-rise">+1</span>');
hit.appendTo($('body'));
hit.css({
opacity: 0,
left: x,
top: y
}).animate({
opacity: 1,
top: y - 16
}, 250).animate({
opacity: 1,
top: y - 20
}, 500).animate({
top: y - 20
}, 500).animate({
opacity: 0,
top: y - 32
}, 250, function() {
return $(this).remove();
});
if (hits % 50 == 0)
alert(hits + ' Hits.. 你还真是有够闲诶 (~ ̄▽ ̄)→))* ̄▽ ̄*)o');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment