|
从https://linux.do/t/topic/202571?u=744798519继续
在此油猴脚本基础上，补充了视频网站，添加了调整大小的功能。
按下“调整大小”按钮后，视频界面会关闭，然后鼠标标记两处，左键两次作为新界面的大小，类似与截图。
添加了 视频边框的手动调节，按照个人喜好调整，可大可小。
// ==UserScript==
// @name 在任何网站看小姐姐
// @namespace https://linux.do
// @version 2.3
// @description 在任何网站看小姐姐
// @include *
// @icon https://www.google.com/s2/favicons?sz=64&domain=linux.do
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
if (window.self !== window.top) return;
// 样式常量
const STYLE_COMMON_BUTTON = {
position: 'fixed',
right: '20px',
bottom: '20px',
padding: '10px 20px',
background: 'linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1)',
backgroundSize: '200% 200%',
color: '#fff',
fontSize: '14px',
fontWeight: 'bold',
cursor: 'pointer',
borderRadius: '50px',
zIndex: '9999', // 保证按钮在最上层
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
transition: 'background-position 0.5s ease, transform 0.3s ease',
};
const STYLE_IFRAME_CONTAINER = {
position: 'fixed',
right: '20px',
bottom: '80px',
width: '320px',
height: '650px',
border: '10px solid #2a2a2a',
borderRadius: '30px',
overflow: 'hidden',
boxShadow: '0 10px 30px rgba(78, 124, 255, 0.3)',
zIndex: '9998',
display: 'none',
transform: 'translateY(100%)',
transition: 'transform 0.3s ease-in-out',
backgroundColor: '#fff',
};
const VIDEO_URL = 'https://xjj.7xnn.cn/h5/';
// 创建按钮和容器
const floatingButton = document.createElement('div');
const resizeButton = document.createElement('div'); // 调整大小按钮
const videoContainer = document.createElement('div');
const iframe = document.createElement('iframe');
// 左右和顶部拖动区域
const leftResizer = document.createElement('div');
const rightResizer = document.createElement('div');
const topResizer = document.createElement('div'); // 新增顶部调整区域
// 设置按钮样式
Object.assign(floatingButton.style, STYLE_COMMON_BUTTON);
floatingButton.textContent = '摸鱼视频';
// 设置调整大小按钮
const STYLE_RESIZE_BUTTON = {
position: 'fixed',
right: '160px', // 调整大小按钮相对浮动按钮的位置
bottom: '20px',
padding: '10px 20px',
background: 'linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1)',
color: '#fff',
fontSize: '14px',
fontWeight: 'bold',
cursor: 'pointer',
borderRadius: '50px',
zIndex: '9999', // 确保按钮显示在最上层
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
};
Object.assign(resizeButton.style, STYLE_RESIZE_BUTTON);
resizeButton.textContent = '调整大小';
// 设置左右和顶部调整区域样式
const STYLE_RESIZER = {
position: 'absolute',
width: '10px',
height: '100%',
cursor: 'ew-resize',
zIndex: '9999',
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 可视化调整区域
};
Object.assign(leftResizer.style, STYLE_RESIZER);
Object.assign(rightResizer.style, STYLE_RESIZER);
leftResizer.style.left = '0';
rightResizer.style.right = '0';
const STYLE_TOP_RESIZER = {
position: 'absolute',
top: '0',
width: '100%',
height: '10px',
cursor: 'ns-resize',
zIndex: '9999',
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 可视化顶部调整区域
};
Object.assign(topResizer.style, STYLE_TOP_RESIZER);
// 添加调整区域到容器中
videoContainer.appendChild(leftResizer);
videoContainer.appendChild(rightResizer);
videoContainer.appendChild(topResizer); // 添加顶部调整区域
Object.assign(videoContainer.style, STYLE_IFRAME_CONTAINER);
iframe.src = '';
Object.assign(iframe.style, {
width: '100%',
height: '100%',
border: 'none',
overflow: 'hidden',
});
const iframeStyle = document.createElement('style');
iframeStyle.innerHTML = `
iframe::-webkit-scrollbar {
display: none;
}
iframe {
-ms-overflow-style: none;
scrollbar-width: none;
}
`;
document.head.appendChild(iframeStyle);
videoContainer.appendChild(iframe);
document.body.appendChild(floatingButton);
document.body.appendChild(resizeButton); // 添加调整大小按钮
document.body.appendChild(videoContainer);
let isDragging = false;
let dragStartX, dragStartY;
floatingButton.addEventListener('click', () => {
if (!isDragging) {
if (videoContainer.style.display === 'none') {
videoContainer.style.display = 'block';
iframe.src = VIDEO_URL;
setTimeout(() => {
videoContainer.style.transform = 'translateY(0)';
videoContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 10);
} else {
videoContainer.style.transform = 'translateY(100%)';
setTimeout(() => {
videoContainer.style.display = 'none';
iframe.src = '';
}, 300);
}
}
});
floatingButton.addEventListener('mouseenter', () => {
floatingButton.style.backgroundPosition = 'right center';
});
floatingButton.addEventListener('mouseleave', () => {
floatingButton.style.backgroundPosition = 'left center';
});
function enableDrag(button, container) {
button.addEventListener('mousedown', (event) => {
isDragging = false;
dragStartX = event.clientX;
dragStartY = event.clientY;
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
});
function onDragMove(event) {
const deltaX = dragStartX - event.clientX;
const deltaY = dragStartY - event.clientY;
if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
isDragging = true;
}
if (isDragging) {
const newRight = `${parseInt(window.getComputedStyle(button).right, 10) + deltaX}px`;
const newBottom = `${parseInt(window.getComputedStyle(button).bottom, 10) + deltaY}px`;
button.style.right = newRight;
button.style.bottom = newBottom;
container.style.right = newRight;
container.style.bottom = `${parseInt(newBottom) + 60}px`;
// 保证调整大小按钮在摸鱼视频按钮左边
resizeButton.style.right = `${parseInt(newRight) + 140}px`;
resizeButton.style.bottom = newBottom;
dragStartX = event.clientX;
dragStartY = event.clientY;
}
}
function onDragEnd() {
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
}
}
enableDrag(floatingButton, videoContainer);
// 左右边框调整大小功能
function enableResize(container, resizer, direction) {
let startX, startY, startWidth, startHeight;
resizer.addEventListener('mousedown', (e) => {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(window.getComputedStyle(container).width, 10);
startHeight = parseInt(window.getComputedStyle(container).height, 10);
document.body.style.pointerEvents = 'none'; // 禁用其他页面元素的鼠标事件
document.addEventListener('mousemove', onResize);
document.addEventListener('mouseup', onResizeEnd);
});
function onResize(e) {
if (direction === 'left') {
container.style.width = `${startWidth - (e.clientX - startX)}px`;
} else if (direction === 'right') {
container.style.width = `${startWidth + (e.clientX - startX)}px`;
} else if (direction === 'top') {
container.style.height = `${startHeight - (e.clientY - startY)}px`; // 顶部调整高度
}
}
function onResizeEnd() {
document.body.style.pointerEvents = ''; // 恢复其他页面元素的鼠标事件
document.removeEventListener('mousemove', onResize);
document.removeEventListener('mouseup', onResizeEnd);
}
}
// 启用左右和顶部的拖动功能
enableResize(videoContainer, leftResizer, 'left');
enableResize(videoContainer, rightResizer, 'right');
enableResize(videoContainer, topResizer, 'top'); // 启用顶部拖动功能
// 调整大小按钮功能，避免与拖动功能冲突
resizeButton.addEventListener('click', () => {
let clicks = 0;
let startX, startY, endX, endY;
// 关闭视频容器界面
videoContainer.style.transform = 'translateY(100%)';
setTimeout(() => {
videoContainer.style.display = 'none';
iframe.src = '';
}, 300);
// 开始监听鼠标点击事件
const handleResizeClick = (event) => {
if (event.target === resizeButton || event.target === floatingButton) {
return;
}
clicks++;
if (clicks === 1) {
// 记录起始点
startX = event.clientX;
startY = event.clientY;
} else if (clicks === 2) {
// 记录终点并调整大小
endX = event.clientX;
endY = event.clientY;
const width = Math.abs(endX - startX);
const height = Math.abs(endY - startY);
videoContainer.style.width = `${width}px`;
videoContainer.style.height = `${height}px`;
// 重新显示视频容器
videoContainer.style.display = 'block';
iframe.src = VIDEO_URL;
setTimeout(() => {
videoContainer.style.transform = 'translateY(0)';
videoContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 10);
// 保持调整大小按钮在摸鱼视频按钮左边
resizeButton.style.right = `${parseInt(floatingButton.style.right) + 140}px`;
resizeButton.style.bottom = floatingButton.style.bottom;
// 完成调整，解除事件绑定并重置状态
document.removeEventListener('click', handleResizeClick);
clicks = 0;
}
};
// 等待用户点击页面的下两次鼠标操作
setTimeout(() => {
document.addEventListener('click', handleResizeClick, { once: false });
}, 0); // 使用 setTimeout 确保不会捕获按钮的点击事件
});
})();
可在
const VIDEO_URL = 'https://xjj.7xnn.cn/h5/';
修改视频地址 |
