👍忽略滑动动画，快速切换页面，可以通过键盘或浮动窗口进行操作，并调整黑色模式、悬浮窗大小和滑动保留页面比例。
目前為
// ==UserScript==
// @name 📕无动画全屏翻页丨墨水屏一键翻页丨保留比例翻页丨自定义比例
// @version 2.3.3
// @description 👍忽略滑动动画，快速切换页面，可以通过键盘或浮动窗口进行操作，并调整黑色模式、悬浮窗大小和滑动保留页面比例。
// @author Jingyu0123
// @match *://*/*
// @license GPL
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @namespace https://greasyfork.org/users/1292046
// ==/UserScript==
(function () {
'use strict';
// 默认配置变量
const autoDetectModeOptions = ['关闭', '同色', '反色'];
var usePgUpPgDn = GM_getValue('usePgUpPgDn', true);
var reservedHeightPercentage = GM_getValue('reservedHeightPercentage', 0);
var isBlackMode = GM_getValue('isBlackMode', false);
var floatWindowSize = GM_getValue('floatWindowSize', 80);
var autoDetectMode = GM_getValue('autoDetectMode', '关闭');
var isVerticalLayout = GM_getValue('isVerticalLayout', true);
var windowOpacity = GM_getValue('windowOpacity', 0.8);
var textOpacity = GM_getValue('textOpacity', 1.0);
var floatWindowVisible = GM_getValue('floatWindowVisible', true);
var upKey = GM_getValue('upKey', 'PageUp');
var downKey = GM_getValue('downKey', 'PageDown');
var enableHotkeys = GM_getValue('enableHotkeys', true);
// 自动检测黑色模式
function detectDarkMode() {
const bgColor = window.getComputedStyle(document.body).backgroundColor;
const colorValues = bgColor.match(/\d+/g);
if (colorValues) {
const r = parseInt(colorValues[0]);
const g = parseInt(colorValues[1]);
const b = parseInt(colorValues[2]);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness < 128;
}
return false;
}
if (autoDetectMode === '同色') {
isBlackMode = detectDarkMode();
} else if (autoDetectMode === '反色') {
isBlackMode = !detectDarkMode();
}
// 创建悬浮窗
function createFloatingWindow() {
// 检查是否已经存在浮窗
if (document.getElementById('floatingWindow')) {
return; // 如果已经存在浮窗，则不创建新的浮窗
}
if (!floatWindowVisible) return;
const floatWindow = document.createElement('div');
floatWindow.id = 'floatingWindow'; // 为浮窗设置一个唯一的ID
const initialLeft = GM_getValue('floatWindowLeft', 'calc(100% - 90px)');
const initialTop = GM_getValue('floatWindowTop', 'calc(100% - 270px)');
floatWindow.style = `
position: fixed;
left: ${initialLeft};
top: ${initialTop};
width: ${isVerticalLayout ? floatWindowSize + 'px' : (floatWindowSize * 3) + 'px'};
height: ${isVerticalLayout ? (floatWindowSize * 3) + 'px' : floatWindowSize + 'px'};
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
border: 1px solid #ccc;
z-index: 10000;
display: flex;
flex-direction: ${isVerticalLayout ? 'column' : 'row'};
align-items: center;
justify-content: space-around;
cursor: move;
padding: 5px;
border-radius: 5px;
opacity: ${windowOpacity};
`;
floatWindow.draggable = true;
const btnSettings = document.createElement('button');
btnSettings.innerHTML = '=';
btnSettings.style = buttonStyle();
btnSettings.onclick = showSettings;
const btnDown = document.createElement('button');
btnDown.innerHTML = '↓';
btnDown.style = buttonStyle();
btnDown.onclick = () => scrollPage(1);
const btnUp = document.createElement('button');
btnUp.innerHTML = '↑';
btnUp.style = buttonStyle();
btnUp.onclick = () => scrollPage(-1);
floatWindow.appendChild(btnSettings);
floatWindow.appendChild(btnDown);
floatWindow.appendChild(btnUp);
document.body.appendChild(floatWindow);
// 悬浮窗拖拽功能
floatWindow.addEventListener('dragstart', (event) => {
const style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData('text/plain',
(parseInt(style.getPropertyValue('left'), 10) - event.clientX) + ',' +
(parseInt(style.getPropertyValue('top'), 10) - event.clientY));
}, false);
document.body.addEventListener('dragover', (event) => {
event.preventDefault();
return false;
}, false);
document.body.addEventListener('drop', (event) => {
const offset = event.dataTransfer.getData('text/plain').split(',');
const floatWindow = document.querySelector('div[draggable="true"]');
const left = (event.clientX + parseInt(offset[0], 10)) + 'px';
const top = (event.clientY + parseInt(offset[1], 10)) + 'px';
floatWindow.style.left = left;
floatWindow.style.top = top;
GM_setValue('floatWindowLeft', left);
GM_setValue('floatWindowTop', top);
event.preventDefault();
return false;
}, false);
}
// 滚动页面函数
function scrollPage(direction) {
const screenHeight = window.innerHeight;
const reservedHeight = screenHeight * reservedHeightPercentage / 100;
window.scrollBy(0, direction * (screenHeight - reservedHeight));
}
// 键盘事件监听
window.addEventListener('keydown', function (event) {
if (!enableHotkeys) return; // 检查是否启用热键
const screenHeight = window.innerHeight;
const reservedHeight = screenHeight * reservedHeightPercentage / 100;
if ((event.key === upKey || event.key === downKey)) {
const direction = event.key === downKey ? 1 : -1;
window.scrollBy(0, direction * (screenHeight - reservedHeight));
event.preventDefault();
}
});
// 显示设置窗口
function showSettings() {
const settingsWindow = document.createElement('div');
settingsWindow.style = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
border: 1px solid #ccc;
z-index: 10001;
padding: 20px;
border-radius: 5px;
`;
const settingsContainer = document.createElement('div');
settingsContainer.style = `
display: flex;
flex-direction: column;
align-items: flex-start;
color: ${isBlackMode ? 'white' : 'black'};
`;
// 更新颜色
const updateColors = () => {
settingsWindow.style.backgroundColor = isBlackMode ? 'black' : 'white';
settingsWindow.style.color = isBlackMode ? 'white' : 'black';
settingsContainer.style.color = isBlackMode ? 'white' : 'black';
saveButton.style.backgroundColor = isBlackMode ? 'black' : 'white';
saveButton.style.color = isBlackMode ? 'white' : 'black';
donateButton.style.backgroundColor = isBlackMode ? 'black' : 'white';
donateButton.style.color = isBlackMode ? 'white' : 'black';
};
// 样式设置
const createSetting = (labelText, value, onClick) => {
const container = document.createElement('div');
container.style = `
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
cursor: pointer;
`;
container.onclick = onClick;
const label = document.createElement('span');
label.innerText = labelText;
container.appendChild(label);
const indicator = document.createElement('span');
indicator.innerText = value ? '✔️' : '✖️';
container.appendChild(indicator);
return container;
};
const modeSetting = createSetting('🌑黑色模式', isBlackMode, () => {
isBlackMode = !isBlackMode;
modeSetting.lastChild.innerText = isBlackMode ? '✔️' : '✖️';
GM_setValue('isBlackMode', isBlackMode);
updateColors();
});
const createAutoDetectSetting = (labelText, currentOption, optionValue) => {
const container = document.createElement('div');
container.style = `
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
margin-bottom: 10px;
cursor: pointer;
padding-right: 10px;
`;
container.onclick = () => {
autoDetectMode = optionValue;
GM_setValue('autoDetectMode', autoDetectMode);
updateAutoDetectSettings();
};
const label = document.createElement('span');
label.innerText = labelText;
container.appendChild(label);
const indicator = document.createElement('span');
indicator.innerText = (currentOption === optionValue) ? '✔️' : '✖️';
container.appendChild(indicator);
return container;
};
const updateAutoDetectSettings = () => {
autoDetectSettingContainer.style = `
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
`;
autoDetectSettingContainer.innerHTML = '';
// 创建并定义解释文字的DOM元素
const explanationText = document.createElement('div');
explanationText.innerText = '🔎自动调整悬浮窗颜色（忽略上方修改）';
explanationText.style = 'margin-bottom: 10px; display: block; width: 100%; text-align: left;';
autoDetectSettingContainer.appendChild(explanationText);
// 创建自动检测设置按钮
const settingsContainer = document.createElement('div');
settingsContainer.style = 'display: flex; justify-content: space-between; width: 75%;';
settingsContainer.appendChild(createAutoDetectSetting('关闭', autoDetectMode, '关闭'));
settingsContainer.appendChild(createAutoDetectSetting('同色', autoDetectMode, '同色'));
settingsContainer.appendChild(createAutoDetectSetting('反色', autoDetectMode, '反色'));
autoDetectSettingContainer.appendChild(settingsContainer);
};
const layoutSetting = createSetting('↕️竖向排列按钮', isVerticalLayout, () => {
isVerticalLayout = !isVerticalLayout;
layoutSetting.lastChild.innerText = isVerticalLayout ? '✔️' : '✖️';
});
const createPercentageInput = (labelText, value, min, max) => {
const container = document.createElement('div');
container.style = `
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
`;
const label = document.createElement('label');
label.innerText = labelText;
container.appendChild(label);
const input = document.createElement('input');
input.type = 'number';
input.value = value;
input.min = min;
input.max = max;
input.style = `
width: 50px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
const percentageLabel = document.createElement('span');
percentageLabel.innerText = '%';
container.appendChild(input);
container.appendChild(percentageLabel);
return { container, input };
};
const sizeInput = createPercentageInput('📏悬浮窗大小', floatWindowSize, 20, 100);
const percentageInput = createPercentageInput('📄保留页面比例', reservedHeightPercentage, 0, 100);
const windowOpacityInput = createPercentageInput('🌫️窗口透明度', windowOpacity * 100, 20, 100);
const textOpacityInput = createPercentageInput('🖋️文字透明度', textOpacity * 100, 20, 100);
const saveButton = document.createElement('button');
saveButton.innerHTML = '💾保存';
saveButton.style = `
margin-top: 10px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
saveButton.onclick = () => {
floatWindowSize = parseInt(sizeInput.input.value, 10);
reservedHeightPercentage = Math.min(100, Math.max(0, parseInt(percentageInput.input.value, 10)));
windowOpacity = Math.min(1, Math.max(0.2, parseFloat(windowOpacityInput.input.value) / 100));
textOpacity = Math.min(1, Math.max(0.2, parseFloat(textOpacityInput.input.value) / 100));
GM_setValue('floatWindowSize', floatWindowSize);
GM_setValue('isVerticalLayout', isVerticalLayout);
GM_setValue('reservedHeightPercentage', reservedHeightPercentage);
GM_setValue('windowOpacity', windowOpacity);
GM_setValue('textOpacity', textOpacity);
document.body.removeChild(settingsWindow);
location.reload();
};
const donateButton = document.createElement('button');
donateButton.innerHTML = '🔄更新/💰打赏';
donateButton.style = `
margin-top: 10px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
donateButton.onclick = () => {
if (confirm('⚠️一部分脚本管理器无法自动检测脚本是否有更新，所以需要你去看一下。\n🔄现在的版本号是：v2.0.1。\n💬如果脚本有任何问题，或者你有任何创意，都可以在脚本反馈区留言。\n📄在脚本发布页的介绍部分也放置了我的打赏二维码，\n🥤如果这个脚本帮你解决了大问题，希望你能请我喝杯奶茶哦！')) {
window.open('https://greasyfork.org/zh-CN/scripts/493257', '_blank');
}
};
const toggleFloatWindow = () => {
floatWindowVisible = !floatWindowVisible;
GM_setValue('floatWindowVisible', floatWindowVisible);
document.body.removeChild(settingsWindow);
location.reload();
};
const confirmToggleFloatWindow = () => {
if (confirm('❗️确定要关闭悬浮窗吗？\n🖥️电脑端可以通过脚本管理器中的选项重新打开，\n📱若脚本管理器没有图形化界面，可以重新安装脚本。')) {
toggleFloatWindow();
}
};
const floatWindowSetting = createSetting('📴关闭悬浮窗（长按悬浮窗可以移动）', false, confirmToggleFloatWindow);
// 分割线
const createSeparator = () => {
const separator = document.createElement('hr');
separator.style = 'width: 100%; margin: 10px 0; border: none; border-top: 1px solid #ccc;';
return separator;
};
settingsContainer.appendChild(modeSetting);
const hotkeysToggleSetting = createSetting('开启翻页热键功能', enableHotkeys, () => {
enableHotkeys = !enableHotkeys;
hotkeysToggleSetting.lastChild.innerText = enableHotkeys ? '✔️' : '✖️';
GM_setValue('enableHotkeys', enableHotkeys);
});
const autoDetectSettingContainer = document.createElement('div');
settingsContainer.appendChild(autoDetectSettingContainer);
updateAutoDetectSettings();
settingsContainer.appendChild(createSeparator());
settingsContainer.appendChild(layoutSetting);
settingsContainer.appendChild(sizeInput.container);
settingsContainer.appendChild(percentageInput.container);
settingsContainer.appendChild(windowOpacityInput.container);
settingsContainer.appendChild(textOpacityInput.container);
settingsContainer.appendChild(floatWindowSetting);
settingsContainer.appendChild(createSeparator());
const hotkeySetting = createSetting('🎛️设置电脑端翻页热键', false, () => {
const hotkeyWindow = document.createElement('div');
hotkeyWindow.style = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
border: 1px solid #ccc;
z-index: 10002;
padding: 20px;
border-radius: 5px;
`;
const hotkeyContainer = document.createElement('div');
hotkeyContainer.style = `
display: flex;
flex-direction: column;
align-items: flex-start;
color: ${isBlackMode ? 'white' : 'black'};
`;
// 创建并定义解释文字的DOM元素
const explanationText = document.createElement('div');
explanationText.innerText = '💬请设置翻页热键\n💡选中文本框后直接按下目标热键试试吧:';
explanationText.style = 'margin-bottom: 10px; display: block; width: 100%;';
hotkeyWindow.appendChild(explanationText);
const createHotkeySetting = (labelText, currentKey, onKeyChange) => {
const container = document.createElement('div');
container.style = `
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
`;
const label = document.createElement('label');
label.innerText = labelText;
container.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.value = currentKey;
input.style = `
width: 100px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
input.onkeydown = (event) => {
event.preventDefault();
input.value = event.key;
onKeyChange(event.key);
};
container.appendChild(input);
return container;
};
const upKeySetting = createHotkeySetting('上翻页热键', upKey, (key) => { upKey = key; });
const downKeySetting = createHotkeySetting('下翻页热键', downKey, (key) => { downKey = key; });
const hotkeySaveButton = document.createElement('button');
hotkeySaveButton.innerHTML = '💾保存';
hotkeySaveButton.style = `
margin-top: 10px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
hotkeySaveButton.onclick = () => {
GM_setValue('upKey', upKey);
GM_setValue('downKey', downKey);
document.body.removeChild(hotkeyWindow);
};
hotkeyContainer.appendChild(upKeySetting);
hotkeyContainer.appendChild(downKeySetting);
hotkeyContainer.appendChild(hotkeySaveButton);
hotkeyWindow.appendChild(hotkeyContainer);
document.body.appendChild(hotkeyWindow);
});
settingsContainer.appendChild(hotkeysToggleSetting);
settingsContainer.appendChild(hotkeySetting);
// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.style = `
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 10px;
`;
// 修改保存按钮的样式并添加到按钮容器中
saveButton.style = `
flex: 1;
margin-right: 10px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
buttonContainer.appendChild(saveButton);
// 修改检查更新/打赏按钮的样式并添加到按钮容器中
donateButton.style = `
flex: 1;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
`;
buttonContainer.appendChild(donateButton);
// 将按钮容器添加到设置窗口中
settingsContainer.appendChild(buttonContainer);
settingsWindow.appendChild(settingsContainer);
document.body.appendChild(settingsWindow);
updateColors();
}
// 创建并显示悬浮窗
createFloatingWindow();
// 注册菜单命令
GM_registerMenuCommand('显示悬浮窗', function () {
GM_setValue('floatWindowVisible', true);
location.reload();
});
// 样式辅助函数
function buttonStyle() {
return `
width: ${floatWindowSize}px;
height: ${floatWindowSize}px;
font-size: 20px;
background-color: ${isBlackMode ? 'black' : 'white'};
color: ${isBlackMode ? 'white' : 'black'};
border: none;
opacity: ${textOpacity};
`;
}
})();