☰

Movable & Resizable Menu Script

A movable, resizable menu on a webpage.

当前为 2024-10-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Movable & Resizable Menu Script
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  A movable, resizable menu on a webpage.
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MrSticker23
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Create menu container
  16.     const menu = document.createElement('div');
  17.     menu.style.position = 'fixed';
  18.     menu.style.top = '100px'; // Default start position
  19.     menu.style.left = '100px'; // Default start position
  20.     menu.style.width = '300px'; // Larger size
  21.     menu.style.height = '200px'; // Larger size
  22.     menu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  23.     menu.style.color = 'white';
  24.     menu.style.padding = '10px';
  25.     menu.style.borderRadius = '10px';
  26.     menu.style.zIndex = '1000';
  27.     menu.style.cursor = 'move'; // Cursor for dragging
  28.  
  29.     // Add title
  30.     const title = document.createElement('h3');
  31.     title.textContent = 'Movable Menu';
  32.     title.style.margin = '0 0 10px 0';
  33.     menu.appendChild(title);
  34.  
  35.     // Add menu items (customize as needed)
  36.     const item1 = document.createElement('button');
  37.     item1.textContent = 'Action 1';
  38.     item1.style.marginBottom = '5px';
  39.     item1.style.width = '100%';
  40.     item1.onclick = function() {
  41.         alert('Action 1 triggered!');
  42.     };
  43.     menu.appendChild(item1);
  44.  
  45.     const item2 = document.createElement('button');
  46.     item2.textContent = 'Action 2';
  47.     item2.style.marginTop = '5px';
  48.     item2.style.width = '100%';
  49.     item2.onclick = function() {
  50.         alert('Action 2 triggered!');
  51.     };
  52.     menu.appendChild(item2);
  53.  
  54.     // Make the menu draggable
  55.     let isDragging = false;
  56.     let offsetX, offsetY;
  57.  
  58.     menu.addEventListener('mousedown', function(e) {
  59.         isDragging = true;
  60.         offsetX = e.clientX - parseInt(menu.style.left);
  61.         offsetY = e.clientY - parseInt(menu.style.top);
  62.         menu.style.cursor = 'grabbing'; // Change cursor while dragging
  63.     });
  64.  
  65.     document.addEventListener('mousemove', function(e) {
  66.         if (isDragging) {
  67.             menu.style.left = (e.clientX - offsetX) + 'px';
  68.             menu.style.top = (e.clientY - offsetY) + 'px';
  69.         }
  70.     });
  71.  
  72.     document.addEventListener('mouseup', function() {
  73.         isDragging = false;
  74.         menu.style.cursor = 'move'; // Reset cursor when not dragging
  75.     });
  76.  
  77.     // Append the menu to the body
  78.     document.body.appendChild(menu);
  79.  
  80. })();