当你在敲击键盘的时候, 出现相应键位的动画特效
目前為
// ==UserScript==
// @name 敲起来
// @description 当你在敲击键盘的时候, 出现相应键位的动画特效
// @version 0.3.0
// @author Axetroy
// @include *
// @require https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
// @grant none
// @run-at document-start
// @namespace https://gf.qytechs.cn/zh-CN/users/3400-axetroy
// @license The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==
(function ($) {
let cursor = {
x: 0,
y: 0
};
let keyboardMap = [
"",
"",
"",
"CANCEL",
"",
"",
"HELP",
"",
"BACK SPACE",
"TAB",
"",
"",
"CLEAR",
"ENTER",
"ENTER SPECIAL",
"",
"SHIFT",
"CONTROL",
"ALT",
"PAUSE",
"CAPS LOCK",
"KANA",
"EISU",
"JUNJA",
"FINAL",
"HANJA",
"",
"ESCAPE",
"CONVERT",
"NONCONVERT",
"ACCEPT",
"MODECHANGE",
"SPACE",
"PAGE UP",
"PAGE DOWN",
"END",
"HOME",
"LEFT",
"UP",
"RIGHT",
"DOWN",
"SELECT",
"PRINT",
"EXECUTE",
"PRINTSCREEN",
"INSERT",
"DELETE",
"",
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"COLON",
"SEMICOLON",
"LESS THAN",
"EQUALS",
"GREATER THAN",
"QUESTION MARK",
"AT",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
"OS KEY",
"",
"CONTEXT MENU",
"",
"SLEEP",
"NUMPAD0",
"NUMPAD1",
"NUMPAD2",
"NUMPAD3",
"NUMPAD4",
"NUMPAD5",
"NUMPAD6",
"NUMPAD7",
"NUMPAD8",
"NUMPAD9",
"MULTIPLY",
"ADD",
"SEPARATOR",
"SUBTRACT",
"DECIMAL",
"DIVIDE",
"F1",
"F2",
"F3",
"F4",
"F5",
"F6",
"F7",
"F8",
"F9",
"F10",
"F11",
"F12",
"F13",
"F14",
"F15",
"F16",
"F17",
"F18",
"F19",
"F20",
"F21",
"F22",
"F23",
"F24",
"",
"",
"",
"",
"",
"",
"",
"",
"NUM LOCK",
"SCROLL LOCK",
"WIN OEM FJ JISHO",
"WIN OEM FJ MASSHOU",
"WIN OEM FJ TOUROKU",
"WIN OEM FJ LOYA",
"WIN OEM FJ ROYA",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"CIRCUMFLEX",
"EXCLAMATION",
"DOUBLE QUOTE",
"HASH",
"DOLLAR",
"PERCENT",
"AMPERSAND",
"UNDERSCORE",
"OPEN PAREN",
"CLOSE PAREN",
"ASTERISK",
"PLUS",
"PIPE",
"HYPHEN MINUS",
"OPEN CURLY BRACKET",
"CLOSE CURLY BRACKET",
"TILDE",
"",
"",
"",
"",
"VOLUME MUTE",
"VOLUME DOWN",
"VOLUME UP",
"",
"",
"SEMICOLON",
"EQUALS",
"COMMA",
"MINUS",
"PERIOD",
"SLASH",
"BACK QUOTE",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"OPEN BRACKET",
"BACK SLASH",
"CLOSE BRACKET",
"QUOTE",
"",
"META",
"ALTGR",
"",
"WIN ICO HELP",
"WIN ICO 00",
"",
"WIN ICO CLEAR",
"",
"",
"WIN OEM RESET",
"WIN OEM JUMP",
"WIN OEM PA1",
"WIN OEM PA2",
"WIN OEM PA3",
"WIN OEM WSCTRL",
"WIN OEM CUSEL",
"WIN OEM ATTN",
"WIN OEM FINISH",
"WIN OEM COPY",
"WIN OEM AUTO",
"WIN OEM ENLW",
"WIN OEM BACKTAB",
"ATTN",
"CRSEL",
"EXSEL",
"EREOF",
"PLAY",
"ZOOM",
"",
"PA1",
"WIN OEM CLEAR",
""
];
let mouseMap = {
1: 'Click',
2: 'Center Click',
3: 'Right Click'
};
keyboardMap.map(function (key) {
return key.replace(/-|_/g, ' ')
});
function createEle({key, color = '#555', pageX, pageY}) {
let $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 = 50 + 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 stringToColor(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let x = 0; x < 3; x++) {
let 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({
key: keyboardMap[event.keyCode],
color: stringToColor((event.keyCode + event.key).repeat(2)),
pageX: x,
pageY: y
});
});
// record coordinate
$(window).on('mousemove', function (event) {
event = event || window.event;
cursor.x = event.pageX;
cursor.y = event.pageY;
});
$(window).mousedown(function (event) {
let key = mouseMap[event.which];
let {x, y} = randomXY(event.pageX, event.pageY);
createEle({
key: key,
color: stringToColor(key),
pageX: x,
pageY: y
});
});
})(window.jQuery.noConflict(true));
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址