以下是脚本的内容,可以直接新建,然后复制进去使用。说实话,我并不是程序出身,它有一些我解决不了的小 bug,可能并不是那么好用
// ==UserScript==
// @name 可拖动的全屏按钮(触屏支持修复)// @namespace http://tampermonkey.net/// @version 0.4// @description 在网页右上角添加一个可拖动的全屏按钮,支持触屏,修复点击全屏的bug// @author YourName// @match *://*/*// @grant none// ==/UserScript==
([removed_js] {'use strict';
// 创建全屏按钮var fullScreenButton = document.createElement('button');fullScreenButton.textContent = '全屏';fullScreenButton.style.position = 'fixed';fullScreenButton.style.top = '10px';fullScreenButton.style.right = '10px';fullScreenButton.style.zIndex = 9999;fullScreenButton.style.cursor = 'pointer'; // 设置鼠标样式为指针
// 初始化拖动状态var isDragging = false;var initialX = 0;var initialY = 0;var currentX = 0;var currentY = 0;var xOffset = 0;var yOffset = 0;
// 获取触摸位置function getTouchPos(e) {return { x: e.touches[0].clientX, y: e.touches[0].clientY };}
// 开始拖动function dragStart(e) {if (e.type === 'touchstart') {initialX = e.touches[0].clientX - xOffset;initialY = e.touches[0].clientY - yOffset;} else {initialX = e.clientX - xOffset;initialY = e.clientY - yOffset;}
if (e.target === fullScreenButton) {isDragging = true;}}
// 拖动中function dragging(e) {if (isDragging) {e.preventDefault();
if (e.type === 'touchmove') {currentX = e.touches[0].clientX - initialX;currentY = e.touches[0].clientY - initialY;} else {currentX = e.clientX - initialX;currentY = e.clientY - initialY;}
xOffset = currentX;yOffset = currentY;
setTranslate(currentX, currentY, fullScreenButton);}}
// 结束拖动function dragEnd(e) {initialX = currentX;initialY = currentY;isDragging = false;}
// 设置元素的 transform 属性function setTranslate(xPos, yPos, el) {el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";}
// 绑定事件fullScreenButton.addEventListener('mousedown', dragStart);fullScreenButton.addEventListener('touchstart', dragStart);document.addEventListener('mousemove', dragging);document.addEventListener('touchmove', dragging);document.addEventListener('mouseup', dragEnd);document.addEventListener('touchend', dragEnd);
// 全屏切换函数fullScreenButton.addEventListener('click', [removed_js] {if (!isDragging) {toggleFullScreen();}});
// 将按钮添加到页面[removed_script]
// 全屏切换函数function toggleFullScreen() {if (!document.fullscreenElement && // alternative standard method!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methodsif (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen();} else if (document.documentElement.msRequestFullscreen) {document.documentElement.msRequestFullscreen();} else if (document.documentElement.mozRequestFullScreen) {document.documentElement.mozRequestFullScreen();} else if (document.documentElement.webkitRequestFullscreen) {document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);}} else {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}}})();