☰

敲起来

当你在敲击键盘的时候, 出现相应键位的动画特效

当前为 2016-12-30 提交的版本，查看 最新版本。

// ==UserScript==
// @name          敲起来
// @description   当你在敲击键盘的时候, 出现相应键位的动画特效
// @version       0.1.0
// @author        Axetroy
// @include       *
// @require       https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
// @grant         none
// @run-at        document-start
// @namespace         https://greasyfork.org/zh-CN/users/3400-axetroy
// @license           The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==

(function ($) {
  let cursor = {
    x: 0,
    y: 0
  };

  function createEle(event, pageX, pageY) {
    var key = event.key === ' ' ? 'Space' : event.key;
    var color = stringToColour(event.keyCode + key + event.keyCode + key) || "#555";
    var $span = $(`<span>${key}</span>`)
      .css({
        position: "absolute",
        zIndex: 999999999,
        top: pageY + "px",
        left: pageX + "px",
        display: "inline-block",
        padding: "3px 5px",
        fontSize: "11px",
        lineHeight: "10px",
        color: color,
        verticalAlign: "middle",
        backgroundColor: "#fcfcfc",
        border: "solid 1px #ccc",
        borderBottomColor: "#bbb",
        borderRadius: "3px",
        boxShadow: "inset 0 -1px 0 #bbb"
      }).appendTo(document.body);

    setTimeout(function () {
      $span.animate({
        opacity: 0,
        top: "-=20"
      }, 500, function () {
        $span.remove();
        $span = null;
      })
    }, 500);
  }

  function randomXY(x, y) {
    let radius = 20 + parseInt(Math.random() * 50 + '');    // 随机的半径
    let angle = parseInt(Math.random() * 360 + '');         // 随机的角度
    let width = 0;
    let height = 0;

    if (angle >= 0 && angle < 90) {
      height = radius * Math.sin(angle * 2 * Math.PI / 360);
      width = radius * Math.cos(angle * 2 * Math.PI / 360);
      x = x + width;
      y = y - height;
    }
    else if (angle >= 90 && angle < 180) {
      height = radius * Math.sin((180 - angle) * 2 * Math.PI / 360);
      width = radius * Math.cos((180 * angle) * 2 * Math.PI / 360);
      x = x - width;
      y = y - height;
    }
    else if (angle >= 180 && angle < 270) {
      height = radius * Math.cos((270 - angle) * 2 * Math.PI / 360);
      width = radius * Math.sin((270 * angle) * 2 * Math.PI / 360);
      x = x - width;
      y = y + height;
    }
    else if (angle >= 270 && angle <= 360) {
      height = radius * Math.cos((angle - 270) * 2 * Math.PI / 360);
      width = radius * Math.sin((angle - 270) * 2 * Math.PI / 360);
      x = x + width;
      y = y + height;
    }

    return {x, y};
  }

  function stringToColour(str) {
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
      hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    var colour = '#';
    for (var x = 0; x < 3; x++) {
      var value = (hash >> (x * 8)) & 0xFF;
      colour += ('00' + value.toString(16)).substr(-2);
    }
    return colour;
  }


  $(window).on('keyup', function (event) {
    let {x, y} = randomXY(cursor.x, cursor.y);
    createEle(event, x, y);
  });

  // record coordinate
  $(window).on('mousemove', function (event) {
    event = event || window.event;
    cursor.x = event.pageX;
    cursor.y = event.pageY;
  });

})(window.jQuery.noConflict(true));