rotate-screen

旋轉網頁, Ctrl + Alt + 方向鍵

  1. // ==UserScript==
  2. // @name rotate-screen
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0.0
  5. // @author Vanisoul
  6. // @description 旋轉網頁, Ctrl + Alt + 方向鍵
  7. // @match *://*/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function () {
  12. 'use strict';
  13.  
  14. function rotatePage(degrees) {
  15. const originalWidth = document.documentElement.clientWidth || window.innerWidth;
  16. const originalHeight = document.documentElement.clientHeight || window.innerHeight;
  17. let container = document.querySelector('.rotate-container');
  18. if (!container) {
  19. container = document.createElement('div');
  20. container.classList.add('rotate-container');
  21. while (document.body.firstChild) {
  22. container.appendChild(document.body.firstChild);
  23. }
  24. document.body.appendChild(container);
  25. }
  26. container.style.cssText = "";
  27. if (degrees === 90 || degrees === -90) {
  28. container.style.width = `${originalHeight}px`;
  29. container.style.height = `${originalWidth}px`;
  30. container.style.maxWidth = '100vh';
  31. container.style.maxHeight = '100vw';
  32. container.style.overflow = 'auto';
  33. container.style.position = 'absolute';
  34. container.style.top = '50%';
  35. container.style.left = '50%';
  36. container.style.transform = `translate(-50%, -50%) rotate(${degrees}deg)`;
  37. }
  38. else if (degrees === 180 || degrees === -180) {
  39. container.style.width = `${originalWidth}px`;
  40. container.style.height = `${originalHeight}px`;
  41. container.style.overflow = 'auto';
  42. container.style.position = 'absolute';
  43. container.style.top = '50%';
  44. container.style.left = '50%';
  45. container.style.transform = `translate(-50%, -50%) rotate(${degrees}deg)`;
  46. }
  47. }
  48. document.addEventListener('keydown', function (event) {
  49. const controlKey = event.ctrlKey;
  50. const altKey = event.altKey;
  51. const touchKey = controlKey && altKey;
  52. if (touchKey) {
  53. switch (event.key) {
  54. case "ArrowUp":
  55. rotatePage(180);
  56. break;
  57. case "ArrowDown":
  58. rotatePage(0);
  59. break;
  60. case "ArrowLeft":
  61. rotatePage(90);
  62. break;
  63. case "ArrowRight":
  64. rotatePage(-90);
  65. break;
  66. }
  67. }
  68. });
  69.  
  70. })();