JavaScript to achieve mouse click bubble effect

Time:2021-2-27

This example for you to share the JS mouse click bubble specific code, for your reference, the specific content is as follows

A left click effect written in JS

Click the left mouse button to show “red heart” ❤” Or character expression “๑́₃̀๑”

Common Emoji

It can be replaced by itself. If you need to copy, please move to GitHub from the bottom link

code

onload = function() {
 var click_cnt = 0;
 var $html = document.getElementsByTagName("html")[0];
 var $body = document.getElementsByTagName("body")[0];
 $html.onclick = function(e) {
  var $elem = document.createElement("b");
  $elem.style.color = "#E94F06";
  $elem.style.zIndex = 9999;
  $elem.style.position = "absolute";
  $elem.style.select = "none";
  var x = e.pageX;
  var y = e.pageY;
  $elem.style.left = (x - 10) + "px";
  $elem.style.top = (y - 20) + "px";
  clearInterval(anim);
  switch (++click_cnt) {
   case 10:
    $elem.innerText = "OωO";
    break;
   case 20:
    $elem.innerText = "(๑•́ ∀ •̀๑)";
    break;
   case 30:
    $elem.innerText = "(๑•́ ₃ •̀๑)";
    break;
   case 40:
    $elem.innerText = "(๑•̀_•́๑)";
    break;
   case 50:
    $elem.innerText = "( ̄へ ̄)";
    break;
   case 60:
    $ elem.innerText  ="(╯) ╯ (┴ - ┴";
    break;
   case 70:
    $ elem.innerText  ="૮ (ᵒṸṸ) ა";
    break;
   case 80:
    $ elem.innerText  ="╮ (╮ > mouth ╭";
    break;
   case 90:
    $ elem.innerText  =(a) in the case of a person who is a person who is a person who is a person who is a person who is a person who is a person who is a person who is a person who is a person;
    break;
   case 100:
   case 101:
   case 102:
   case 103:
   case 104:
   case 105:
    $elem.innerText = "(ꐦ°᷄д°᷅)";
    break;
   default:
    $elem.innerText = "❤";
    break;
  }
  $elem.style.fontSize = Math.random() * 10 + 8 + "px";
  var increase = 0;
  var anim;
  setTimeout(function() {
   anim = setInterval(function() {
    if (++increase == 150) {
     clearInterval(anim);
     $body.removeChild($elem);
    }
    $elem.style.top = y - 20 - increase + "px";
    $elem.style.opacity = (150 - increase) / 120;
   }, 8);
  }, 70);
  $body.appendChild($elem);
 };
};

preview

GitHub address: jsclickbubble

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]