敲起来([日语假名]按照标准键盘布局显示对应位置)

当你在敲击键盘的时候, 按照标准键盘布局的位置,出现对应键位的动画特效

As of 2017-01-18. See the latest version.

// ==UserScript==
// @name          敲起来([日语假名]按照标准键盘布局显示对应位置)
// @description   当你在敲击键盘的时候, 按照标准键盘布局的位置,出现对应键位的动画特效
// @version       0.4.0.0.2
// @author        胡朝旭
// @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/94864-%E8%83%A1%E6%9C%9D%E6%97%AD-rory
// @license           The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==

(function ($) {
    let cursor = {
        x: 0,
        y: 0
    };
    let bianju=50;
    //小于30可能因为字体不能再变小而造成排版混乱
    let wh={
        w:0,
        h:0,
        key:"",
        x:0,
        y:0

    };
    let keyboardMap = [
        //键位,x坐标,y坐标,高比例,宽比例
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CANCEL",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["HELP",0,1,1,1],
        ["",0,1,1,1],
        ["BACK SPACE",5.5,0,1,2],
        ["TAB",-7.5,1,1,1.5],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CLEAR",0,1,1,1],
        ["ENTER",5.5,2,1,2],
        ["ENTER SPECIAL",0,1,1,1],
        ["",0,1,1,1],
        ["SHIFT",-7.5,3,1,2],
        ["CONTROL",-7.5,4,1,1],
        ["ALT",-5,4,1,1],
        ["PAUSE",0,1,1,1],
        ["CAPS LOCK",-7.5,2,1,1.8],
        ["KANA",0,1,1,1],
        ["EISU",0,1,1,1],
        ["JUNJA",0,1,1,1],
        ["FINAL",0,1,1,1],
        ["HANJA",0,1,1,1],
        ["",0,1,1,1],
        ["ESCAPE",-8.5,0,1,1],
        ["CONVERT",0,1,1,1],
        ["NONCONVERT",0,1,1,1],
        ["ACCEPT",0,1,1,1],
        ["MODECHANGE",0,1,1,1],
        ["SPACE",-3.5,4,1,5.5],
        ["PAGE UP",10.5,0,1,1],
        ["PAGE DOWN",10.5,1,1,1],
        ["END",9.5,1,1,1],
        ["HOME",9.5,0,1,1],
        ["LEFT",8.5,4,1,1],
        ["UP",9.5,3,1,1],
        ["RIGHT",10.5,4,1,1],
        ["DOWN",9.5,4,1,1],
        ["SELECT",0,1,1,1],
        ["PRINT",0,1,1,1],
        ["EXECUTE",0,1,1,1],
        ["PRINTSCREEN",0,1,1,1],
        ["INSERT",8.5,0,1,1],
        ["DELETE",8.5,1,1,1],
        ["",0,1,1,1],
        [0,2.5,0,1,1],
        [1,-6.5,0,1,1],
        [2,-5.5,0,1,1],
        [3,-4.5,0,1,1],
        [4,-3.5,0,1,1],
        [5,-2.5,0,1,1],
        [6,-1.5,0,1,1],
        [7,-0.5,0,1,1],
        [8,0.5,0,1,1],
        [9,1.5,0,1,1],
        ["COLON",0,1,1,1],
        ["SEMICOLON",0,1,1,1],
        ["LESS THAN",0,1,1,1],
        ["EQUALS",0,1,1,1],
        ["GREATER THAN",0,1,1,1],
        ["QUESTION MARK",0,1,1,1],
        ["AT",0,1,1,1],
        ["A",-5.7,2,1,1],
        ["B",-1,3,1,1],
        ["C",-3,3,1,1],
        ["D",-3.7,2,1,1],
        ["E",-4,1,1,1],
        ["F",-2.7,2,1,1],
        ["G",-1.7,2,1,1],
        ["H",-0.7,2,1,1],
        ["I",1,1,1,1],
        ["J",0.3,2,1,1],
        ["K",1.3,2,1,1],
        ["L",2.3,2,1,1],
        ["M",1,3,1,1],
        ["N",0,3,1,1],
        ["O",2,1,1,1],
        ["P",3,1,1,1],
        ["Q",-6,1,1,1],
        ["R",-3,1,1,1],
        ["S",-4.7,2,1,1],
        ["T",-2,1,1,1],
        ["U",0,1,1,1],
        ["V",-2,3,1,1],
        ["W",-5,1,1,1],
        ["X",-4,3,1,1],
        ["Y",-1,1,1,1],
        ["Z",-5,3,1,1],
        ["OS KEY",-6,4,1,1],
        ["",0,1,1,1],
        ["CONTEXT MENU",0,1,1,1],
        ["",0,1,1,1],
        ["SLEEP",0,1,1,1],
        ["NUMPAD0",12.5,4,1,2],
        ["NUMPAD1",12.5,3,1,1],
        ["NUMPAD2",13.5,3,1,1],
        ["NUMPAD3",14.5,3,1,1],
        ["NUMPAD4",12.5,2,1,1],
        ["NUMPAD5",13.5,2,1,1],
        ["NUMPAD6",14.5,2,1,1],
        ["NUMPAD7",12.5,1,1,1],
        ["NUMPAD8",13.5,1,1,1],
        ["NUMPAD9",14.5,1,1,1],
        ["MULTIPLY",14.5,0,1,1],
        ["ADD",15.5,1,2,1],
        ["SEPARATOR",0,1,1,1],
        ["SUBTRACT",15.5,0,1,1],
        ["DECIMAL",14.5,4,1,1],
        ["DIVIDE",13.5,0,1,1],
        ["F1",-10,1,1,1],
        ["F2",-9,1,1,1],
        ["F3",-8,1,1,1],
        ["F4",-7,1,1,1],
        ["F5",-5.5,1,1,1],
        ["F6",-4.5,1,1,1],
        ["F7",-3.5,1,1,1],
        ["F8",-1,1,1,1],
        ["F9",-1,1,1,1],
        ["F10",0,1,1,1],
        ["F11",4.5,0,1,1],
        ["F12",5.5,0,1,1],
        ["F13",0,1,1,1],
        ["F14",0,1,1,1],
        ["F15",0,1,1,1],
        ["F16",0,1,1,1],
        ["F17",0,1,1,1],
        ["F18",0,1,1,1],
        ["F19",0,1,1,1],
        ["F20",0,1,1,1],
        ["F21",0,1,1,1],
        ["F22",0,1,1,1],
        ["F23",0,1,1,1],
        ["F24",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["NUM LOCK",12.5,0,1,1],
        ["SCROLL LOCK",0,1,1,1],
        ["WIN OEM FJ JISHO",0,1,1,1],
        ["WIN OEM FJ MASSHOU",0,1,1,1],
        ["WIN OEM FJ TOUROKU",0,1,1,1],
        ["WIN OEM FJ LOYA",0,1,1,1],
        ["WIN OEM FJ ROYA",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CIRCUMFLEX",0,1,1,1],
        ["EXCLAMATION",0,1,1,1],
        ["DOUBLE QUOTE",0,1,1,1],
        ["HASH",0,1,1,1],
        ["DOLLAR",0,1,1,1],
        ["PERCENT",0,1,1,1],
        ["AMPERSAND",0,1,1,1],
        ["UNDERSCORE",0,1,1,1],
        ["OPEN PAREN",0,1,1,1],
        ["CLOSE PAREN",0,1,1,1],
        ["ASTERISK",0,1,1,1],
        ["PLUS",0,1,1,1],
        ["PIPE",0,1,1,1],
        ["HYPHEN MINUS",0,1,1,1],
        ["OPEN CURLY BRACKET",0,1,1,1],
        ["CLOSE CURLY BRACKET",0,1,1,1],
        ["TILDE",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["VOLUME MUTE",0,1,1,1],
        ["VOLUME DOWN",0,1,1,1],
        ["VOLUME UP",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["SEMICOLON",3.3,2,1,1],
        ["EQUALS",4.5,0,1,1],
        ["COMMA",2,3,1,1],
        ["MINUS",3.5,0,1,1],
        ["PERIOD",3,3,1,1],
        ["SLASH",4,3,1,1],
        ["BACK QUOTE",-7.5,0,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["OPEN BRACKET",4,1,1,1],
        ["BACK SLASH",6,1,1,1.5],
        ["CLOSE BRACKET",5,1,1,1],
        ["QUOTE",4.3,2,1,1],
        ["",0,1,1,1],
        ["META",0,1,1,1],
        ["ALTGR",0,1,1,1],
        ["",0,1,1,1],
        ["WIN ICO HELP",0,1,1,1],
        ["WIN ICO 00",0,1,1,1],
        ["",0,1,1,1],
        ["WIN ICO CLEAR",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["WIN OEM RESET",0,1,1,1],
        ["WIN OEM JUMP",0,1,1,1],
        ["WIN OEM PA1",0,1,1,1],
        ["WIN OEM PA2",0,1,1,1],
        ["WIN OEM PA3",0,1,1,1],
        ["WIN OEM WSCTRL",0,1,1,1],
        ["WIN OEM CUSEL",0,1,1,1],
        ["WIN OEM ATTN",0,1,1,1],
        ["WIN OEM FINISH",0,1,1,1],
        ["WIN OEM COPY",0,1,1,1],
        ["WIN OEM AUTO",0,1,1,1],
        ["WIN OEM ENLW",0,1,1,1],
        ["WIN OEM BACKTAB",0,1,1,1],
        ["ATTN",0,1,1,1],
        ["CRSEL",0,1,1,1],
        ["EXSEL",0,1,1,1],
        ["EREOF",0,1,1,1],
        ["PLAY",0,1,1,1],
        ["ZOOM",0,1,1,1],
        ["",0,1,1,1],
        ["PA1",0,1,1,1],
        ["WIN OEM CLEAR",0,1,1,1],
        ["",0,1,1,1],
    ];

    let mouseMap = [
        ["左键",-1.5,-1,1,1],
        ["中键",-0.5,-1,1,1],
        ["右键",0.5,-1,1,1]
    ];

    function createEle({key, color = '#555', pageX, pageY}) {
        let $span = $(`<span>${key}</span>`)
        .css({
            position: "absolute",
            zIndex: 999999999,
            top: pageY + "px",
            left: pageX + "px",
            fontSize: bianju/2.5,
            height:wh.h,
            width:wh.w,
            color: color,
            backgroundColor: "#fcfcfc",
            border: "solid 5px #ccc",
            borderBottomColor: "#bbb",
            borderRadius: "5px",
        }).appendTo(document.body);

        setTimeout(function () {
            $span.animate({
                opacity: 0,
                top: "-="+bianju/2
            }, 1500, function () {
                $span.remove();
                $span = null;
            })
        }, 700);
    }


    //
    function zuizhongzi(KMMap){
        wh.w=bianju*KMMap[4];
        wh.h=bianju*KMMap[3];
        createEle({
            key: KMMap[0],
            color: "#"+ ("00000"+ (Math.random() * 0x1000000 << 0).toString(16)).substr(-6),
            pageX: cursor.x+KMMap[1]*(bianju+20)+10,
            pageY: cursor.y+KMMap[2]*(bianju+20)

        });
    }
    // 获取鼠标坐标
    $(window).on('mousemove', function (event) {
        event = event || window.event;
        cursor.x = event.pageX;
        cursor.y = event.pageY;
    });
    //键盘按键
    $(window).on('keyup', function (event) {
        zuizhongzi(keyboardMap[event.keyCode]);
    });


    //鼠标按键
    $(window).mousedown(function (event) {
        zuizhongzi(mouseMap[event.which-1]);
    });

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