KK-console
// ==UserScript==
// @name KK-console
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @description Basic
// @author KK
// @match https://*
// ==/UserScript==
(function() {
'use strict';
$(function() {
// dev-logs
// alert("kk-console开发者模式");
console.log('kk-console loaded');
// CSS Start -------------------------------------------
// for btn
$('button.kk-btn').css({
'mergin': '5px',
'padding': '5px 5px',
'border': '1px solid #000',
'border-radius': '3px',
'background-color': '#fff',
'color': '#000',
'font-size': '14px',
})
// CSS End ------------------------------------------------
// Scripts Start
// global control variables
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
let h2;
// create elements (kk_console)
let $kk_console = $('<div>');
$kk_console.attr('id', 'kk-console');
$kk_console.css({
'z-index': 9999999999999999999999999999999,
'left': '60%',
'top': '0%',
'padding': '5px 1px 1px 1px',
'background-color': '#FFE4C4',
'border': '0px',
'width': '300px',
'height': '400px',
'position': 'fixed',
});
// insert into target
$('body').after($kk_console);
// control-bar
let $control_bar_title = $('<p>');
$control_bar_title.text("kk-console's control-bar");
$control_bar_title.css({
'color': '#000',
'font-size': '16px',
'margin': '5px 2px 5px 10px',
})
$kk_console.prepend($control_bar_title);
// event binding of kk_console
$(document).mouseup((e) => {
isDragging = false;
});
$kk_console.mousedown((e) => {
isDragging = true;
offsetX = e.pageX - $kk_console.offset().left;
offsetY = e.pageY - $kk_console.offset().top;
});
//---------------------------------------------
// button
let $btn_goback = $('<button>');
$kk_console.append($btn_goback);
$btn_goback.text('返回');
$btn_goback.attr('class', 'kk-btn kk-btn-goback');
// innerHTML portion
let $kk_console_iframe = $('<iframe>');
$kk_console_iframe.attr('frameborder', '0');
$kk_console.append($kk_console_iframe);
$kk_console_iframe.attr('width', $kk_console.width() - 1);
$kk_console_iframe.attr('height', $kk_console.height() - 1);
// the react for mouse
$(document).mousemove((e) => {
if (isDragging) {
let x = e.clientX - offsetX;
let y = e.clientY - offsetY;
// 限制元素在页面内部移动
x = Math.min(Math.max(0, x), document.body.offsetWidth - $kk_console.width());
y = Math.min(Math.max(0, y), document.body.offsetHeight - $kk_console.height());
$kk_console.css('left', `${x}px`);
$kk_console.css('top', `${y}px`);
}
});
$kk_console_iframe.attr('src', 'https://kkyesyes.github.io');
})
})