Greasy Fork is available in English.
添加按钮以调节网页缩放，点击主按钮后再显示+-按钮，并添加动画效果，按钮为白色半透明，支持触摸拖动，贴边收起
// ==UserScript==
// @name 网页缩放调节器
// @namespace http://tampermonkey.net/
// @version 1.9
// @description 添加按钮以调节网页缩放，点击主按钮后再显示+-按钮，并添加动画效果，按钮为白色半透明，支持触摸拖动，贴边收起
// @author xinke
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 添加按钮样式
const buttonStyle = `
.zoom-button-container {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: right 0.3s ease, left 0.3s ease; /* 添加动画效果 */
}
.zoom-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7); /* White semi-transparent */
color: #333; /* Dark text color */
text-align: center;
line-height: 50px;
font-size: 18px;
cursor: pointer;
opacity: 0;
pointer-events: none; /* 禁用点击 */
transition: opacity 0.3s ease, transform 0.3s ease;
user-select: none; /* 禁用文本选择 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
.zoom-button.show {
opacity: 1;
pointer-events: auto; /* 启用点击 */
transform: translateY(0);
}
.zoom-button.hide {
opacity: 0;
pointer-events: none; /* 禁用点击 */
transform: translateY(20px);
}
.zoom-button:hover {
background-color: rgba(255, 255, 255, 0.9); /* Hover效果 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Hover时的阴影 */
}
.zoom-button-container.show .zoom-button {
animation: slideIn 0.3s forwards;
}
.zoom-button-container.hide .zoom-button {
animation: slideOut 0.3s forwards;
}
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(20px);
opacity: 0;
}
}
`;
// 将样式添加到页面的头部
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.textContent = buttonStyle;
document.head.appendChild(styleElement);
// 创建按钮容器
const container = document.createElement('div');
container.className = 'zoom-button-container';
document.body.appendChild(container);
// 创建缩放按钮
const createButton = (id, text) => {
const button = document.createElement('div');
button.id = id;
button.className = 'zoom-button';
button.textContent = text;
container.appendChild(button);
return button;
};
// 初始化缩放级别
let zoomLevel = 100;
// 更新缩放
const updateZoom = (increment) => {
zoomLevel = Math.min(Math.max(zoomLevel + increment, 10), 500); // 限制缩放级别在10%到500%之间
document.body.style.zoom = zoomLevel / 100;
};
// 显示或隐藏按钮
const toggleButtons = (show) => {
if (show) {
zoomInButton.classList.add('show');
zoomInButton.classList.remove('hide');
zoomOutButton.classList.add('show');
zoomOutButton.classList.remove('hide');
} else {
zoomInButton.classList.remove('show');
zoomInButton.classList.add('hide');
zoomOutButton.classList.remove('show');
zoomOutButton.classList.add('hide');
}
};
// 防抖函数
const debounce = (func, wait) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
};
// 创建增加缩放按钮并添加事件监听器
const zoomInButton = createButton('zoomIn', '+');
zoomInButton.addEventListener('click', debounce(() => {
updateZoom(10);
}, 300));
// 创建减少缩放按钮并添加事件监听器
const zoomOutButton = createButton('zoomOut', '-');
zoomOutButton.addEventListener('click', debounce(() => {
updateZoom(-10);
}, 300));
// 创建主按钮并添加事件监听器
const zoomToggleButton = createButton('zoomToggle', 'Z');
zoomToggleButton.classList.add('show');
zoomToggleButton.addEventListener('click', () => {
const isHidden = !zoomInButton.classList.contains('show');
toggleButtons(isHidden);
});
// 添加拖动功能
const enableDrag = (element) => {
let isDragging = false;
let startX, startY, initialX, initialY;
element.addEventListener('mousedown', startDrag);
element.addEventListener('touchstart', startDrag, { passive: true });
function startDrag(event) {
isDragging = true;
startX = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
startY = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;
initialX = element.offsetLeft;
initialY = element.offsetTop;
document.addEventListener('mousemove', drag);
document.addEventListener('touchmove', drag, { passive: false });
document.addEventListener('mouseup', stopDrag);
document.addEventListener('touchend', stopDrag);
}
function drag(event) {
if (!isDragging) return;
event.preventDefault();
const clientX = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX;
const clientY = event.type === 'mousemove' ? event.clientY : event.touches[0].clientY;
const dx = clientX - startX;
const dy = clientY - startY;
element.style.left = initialX + dx + 'px';
element.style.top = initialY + dy + 'px';
element.style.right = 'auto';
}
function stopDrag() {
isDragging = false;
document.removeEventListener('mousemove', drag);
document.removeEventListener('touchmove', drag);
document.removeEventListener('mouseup', stopDrag);
document.removeEventListener('touchend', stopDrag);
// 贴边收起
const containerRect = container.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const offsetX = containerRect.left < windowWidth / 2 ? -containerRect.left : windowWidth - containerRect.right;
const offsetY = containerRect.top < windowHeight / 2 ? -containerRect.top : windowHeight - containerRect.bottom;
if (Math.abs(offsetX) < Math.abs(offsetY)) {
if (containerRect.left < windowWidth / 2) {
container.style.left = '10px';
container.style.right = 'auto';
} else {
container.style.left = 'auto';
container.style.right = '10px';
}
} else {
if (containerRect.top < windowHeight / 2) {
container.style.top = '10px';
} else {
container.style.top = 'auto';
container.style.bottom = '10px';
}
}
}
};
// 启用容器的拖动功能
enableDrag(container);
})();