您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
A movable, resizable menu on a webpage.
当前为
// ==UserScript== // @name Movable & Resizable Menu Script // @namespace http://tampermonkey.net/ // @version 0.4 // @description A movable, resizable menu on a webpage. // @author You // @match *://*/* // @grant none // @license MrSticker23 // ==/UserScript== (function() { 'use strict'; // Create menu container const menu = document.createElement('div'); menu.style.position = 'fixed'; menu.style.top = '100px'; menu.style.left = '100px'; menu.style.width = '500px'; // Bigger menu width menu.style.height = '400px'; // Bigger menu height menu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; menu.style.color = 'white'; menu.style.display = 'flex'; menu.style.borderRadius = '10px'; menu.style.zIndex = '1000'; menu.style.cursor = 'move'; // Create sidebar const sidebar = document.createElement('div'); sidebar.style.width = '120px'; // Sidebar width sidebar.style.backgroundColor = '#333'; sidebar.style.display = 'flex'; sidebar.style.flexDirection = 'column'; sidebar.style.justifyContent = 'flex-start'; sidebar.style.padding = '10px'; sidebar.style.borderRight = '2px solid #555'; // Create content container (main menu area) const contentContainer = document.createElement('div'); contentContainer.style.flexGrow = '1'; // Content container grows to fill space contentContainer.style.padding = '20px'; // Sections for the content area const section1 = document.createElement('div'); section1.innerHTML = '<h3>Section 1</h3><p>This is the content for section 1.</p>'; const section2 = document.createElement('div'); section2.innerHTML = '<h3>Section 2</h3><p>This is the content for section 2.</p>'; const section3 = document.createElement('div'); section3.innerHTML = '<h3>Section 3</h3><p>This is the content for section 3.</p>'; // Display the first section initially contentContainer.appendChild(section1); // Function to switch sections function showSection(section) { contentContainer.innerHTML = ''; // Clear previous content contentContainer.appendChild(section); } // Sidebar buttons const btn1 = document.createElement('button'); btn1.textContent = 'Section 1'; btn1.style.marginBottom = '10px'; btn1.onclick = function() { showSection(section1); }; sidebar.appendChild(btn1); const btn2 = document.createElement('button'); btn2.textContent = 'Section 2'; btn2.style.marginBottom = '10px'; btn2.onclick = function() { showSection(section2); }; sidebar.appendChild(btn2); const btn3 = document.createElement('button'); btn3.textContent = 'Section 3'; btn3.onclick = function() { showSection(section3); }; sidebar.appendChild(btn3); // Append sidebar and content container to the menu menu.appendChild(sidebar); menu.appendChild(contentContainer); // Make the menu draggable let isDragging = false; let offsetX, offsetY; menu.addEventListener('mousedown', function(e) { isDragging = true; offsetX = e.clientX - parseInt(menu.style.left); offsetY = e.clientY - parseInt(menu.style.top); menu.style.cursor = 'grabbing'; // Change cursor while dragging }); document.addEventListener('mousemove', function(e) { if (isDragging) { menu.style.left = (e.clientX - offsetX) + 'px'; menu.style.top = (e.clientY - offsetY) + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; menu.style.cursor = 'move'; // Reset cursor when not dragging }); // Append the menu to the body document.body.appendChild(menu); })();