imgur animated upvote/downvote fireworks

adds an animation to upvote/downvote

  1. // ==UserScript==
  2. // @name imgur animated upvote/downvote fireworks
  3. // @namespace http://porath.org/
  4. // @version 0.25
  5. // @description adds an animation to upvote/downvote
  6. // @author porath
  7. // @match http://imgur.com/*
  8. // @match https://imgur.com/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. $('#mainUpArrow').append('<div id="upvote_firework" style="display: none; position: absolute"><img src="//i.imgur.com/YEzlDPG.png" /></div>');
  13. $('#mainDownArrow').append('<div id="downvote_firework" style="display: none; position: absolute"><img src="//i.imgur.com/5WTwxi9.png" /></div>');
  14.  
  15. $('#mainUpArrow').on('click', function () {
  16. if ($('#mainUpArrow').hasClass('pushed')) {
  17. return;
  18. }
  19.  
  20. $('#upvote_firework').css("top", -39);
  21. $('#upvote_firework').css("left", -80);
  22.  
  23. $('#upvote_firework').show();
  24.  
  25. window.setTimeout(function() { // wait, then hide the animation
  26. $('#upvote_firework').hide();
  27. }, 1000);
  28. });
  29.  
  30. $('#mainDownArrow').on('click', function () {
  31. if ($('#mainDownArrow').hasClass('pushed')) {
  32. return;
  33. }
  34.  
  35. $('#downvote_firework').css("top", -39);
  36. $('#downvote_firework').css("left", -39);
  37.  
  38. $('#downvote_firework').show();
  39.  
  40. window.setTimeout(function() { // wait, then hide the animation
  41. $('#downvote_firework').hide();
  42. }, 1000);
  43. });
  44.  
  45. function animateCommentUpvote (a) {
  46. if (a.parent().find('.comment_upvote').length == 0) {
  47. a.closest('.up').append('<div class="comment_upvote" style="display: none; position: absolute; width: 80px; height: 45px;"><img style="width: 80px !important; height: 45px !important;" src="//i.imgur.com/YEzlDPG.png" /></div>');
  48. }
  49.  
  50. a.parent().find('.comment_upvote').css("top", -10);
  51. a.parent().find('.comment_upvote').css("left", -15);
  52.  
  53. a.parent().find('.comment_upvote').show();
  54.  
  55. window.setTimeout(function() { // wait, then hide the animation
  56. $('.comment_upvote').hide();
  57. }, 1000);
  58. };
  59.  
  60. function animateCommentDownvote (a) {
  61. if (a.parent().find('.comment_downvote').length == 0) {
  62. a.closest('.up').append('<div class="comment_downvote" style="display: none; position: absolute; width: 80px; height: 45px;"><img style="width: 80px !important; height: 45px !important;" src="//i.imgur.com/5WTwxi9.png" /></div>');
  63. }
  64.  
  65. a.parent().find('.comment_downvote').css("top", -10);
  66. a.parent().find('.comment_downvote').css("left", -15);
  67.  
  68. a.parent().find('.comment_downvote').show();
  69.  
  70. window.setTimeout(function() { // wait, then hide the animation
  71. $('.comment_downvote').hide();
  72. }, 1000);
  73. };
  74.  
  75. $('#comments-container').on('click', '.icon-upvote', function () {
  76. if ($(this).parent().hasClass('pushed')) {
  77. return;
  78. }
  79.  
  80. animateCommentUpvote($(this));
  81. });
  82.  
  83. $('#comments-container').on('click', '.up.arrow', function () {
  84. if ($(this).hasClass('pushed')) {
  85. return;
  86. }
  87.  
  88. animateCommentUpvote($(this).find('.icon-upvote'));
  89. });
  90.  
  91. $('#comments-container').on('click', '.icon-downvote', function () {
  92. if ($(this).parent().hasClass('pushed')) {
  93. return;
  94. }
  95.  
  96. animateCommentDownvote($(this));
  97. });
  98.  
  99. $('#comments-container').on('click', '.down.arrow', function () {
  100. if ($(this).parent().hasClass('pushed')) {
  101. return;
  102. }
  103.  
  104. animateCommentDownvote($(this).find('.icon-downvote'));
  105. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址