【善者神佑】【脚本】快捷切换图片

点开图片时，按ad或者←→快捷切换图片

@Name @Match

1. // ==UserScript==
   
2. // @name         GM查看图片
   
3. // @version      0.1
   
4. // @author       MKM
   
5. // @match        https://www.gamemale.com/*
   
6. // ==/UserScript==
   
7. 
   
8. 
   
9. (function() {
   
10.     'use strict';
    
11. 
    
12.     const config = {
    
13.         hotkey: {
    
14.             prev: 'ArrowLeft',
    
15.             next: 'ArrowRight',
    
16.             close: 'Escape',
    
17.             prevAlt: 'a',
    
18.             nextAlt: 'd'
    
19.         }
    
20.     };
    
21. 
    
22.     function isImageViewerActive() {
    
23.         const viewer = document.getElementById('imgzoom');
    
24.         if (!viewer) return false;
    
25.         const style = window.getComputedStyle(viewer);
    
26.         return style.display !== 'none' && style.visibility !== 'hidden';
    
27.     }
    
28. 
    
29.     function clickPrev() {
    
30.         const prevBtn = document.getElementById('zimg_prev');
    
31.         if (prevBtn && isImageViewerActive()) {
    
32.             prevBtn.click();
    
33.         }
    
34.     }
    
35. 
    
36.     function clickNext() {
    
37.         const nextBtn = document.getElementById('zimg_next');
    
38.         if (nextBtn && isImageViewerActive()) {
    
39.             nextBtn.click();
    
40.         }
    
41.     }
    
42. 
    
43.     function closeViewer() {
    
44.         const closeBtn = document.querySelector('#imgzoom .imgclose');
    
45.         if (closeBtn && isImageViewerActive()) {
    
46.             closeBtn.click();
    
47.         }
    
48.     }
    
49. 
    
50.     function addViewerKeyboardListener() {
    
51.         const viewer = document.getElementById('imgzoom');
    
52.         if (!viewer || viewer.dataset.keyboardListenerAdded) return;
    
53. 
    
54.         viewer.addEventListener('keydown', handleViewerKeyDown, true);
    
55.         viewer.dataset.keyboardListenerAdded = 'true';
    
56.         viewer.setAttribute('tabindex', '-1');
    
57.     }
    
58. 
    
59.     function handleViewerKeyDown(e) {
    
60.         if (!isImageViewerActive()) return;
    
61. 
    
62.         let handled = false;
    
63. 
    
64.         switch(e.key) {
    
65.             case config.hotkey.prev:
    
66.             case config.hotkey.prevAlt:
    
67.                 e.preventDefault();
    
68.                 e.stopPropagation();
    
69.                 e.stopImmediatePropagation();
    
70.                 clickPrev();
    
71.                 handled = true;
    
72.                 break;
    
73. 
    
74.             case config.hotkey.next:
    
75.             case config.hotkey.nextAlt:
    
76.                 e.preventDefault();
    
77.                 e.stopPropagation();
    
78.                 e.stopImmediatePropagation();
    
79.                 clickNext();
    
80.                 handled = true;
    
81.                 break;
    
82. 
    
83.             case config.hotkey.close:
    
84.                 e.preventDefault();
    
85.                 e.stopPropagation();
    
86.                 e.stopImmediatePropagation();
    
87.                 closeViewer();
    
88.                 handled = true;
    
89.                 break;
    
90.         }
    
91. 
    
92.         if (handled) {
    
93.             e.preventDefault();
    
94.             e.stopPropagation();
    
95.             e.stopImmediatePropagation();
    
96.             return false;
    
97.         }
    
98.     }
    
99. 
    
100.     function handleGlobalKeyDown(e) {
     
101.         if (!isImageViewerActive()) return;
     
102. 
     
103.         const hotkeys = [
     
104.             config.hotkey.prev,
     
105.             config.hotkey.next,
     
106.             config.hotkey.close,
     
107.             config.hotkey.prevAlt,
     
108.             config.hotkey.nextAlt
     
109.         ];
     
110. 
     
111.         if (hotkeys.includes(e.key)) {
     
112.             e.stopImmediatePropagation();
     
113. 
     
114.             switch(e.key) {
     
115.                 case config.hotkey.prev:
     
116.                 case config.hotkey.prevAlt:
     
117.                     clickPrev();
     
118.                     break;
     
119.                 case config.hotkey.next:
     
120.                 case config.hotkey.nextAlt:
     
121.                     clickNext();
     
122.                     break;
     
123.                 case config.hotkey.close:
     
124.                     closeViewer();
     
125.                     break;
     
126.             }
     
127. 
     
128.             return false;
     
129.         }
     
130.     }
     
131. 
     
132.     const observer = new MutationObserver((mutations) => {
     
133.         mutations.forEach((mutation) => {
     
134.             if (mutation.addedNodes.length) {
     
135.                 mutation.addedNodes.forEach((node) => {
     
136.                     if (node.id === 'imgzoom' || (node.querySelector && node.querySelector('#imgzoom'))) {
     
137.                         setTimeout(() => {
     
138.                             const viewer = document.getElementById('imgzoom');
     
139.                             if (viewer) {
     
140.                                 addViewerKeyboardListener();
     
141.                                 viewer.focus();
     
142.                             }
     
143.                         }, 150);
     
144.                     }
     
145.                 });
     
146.             }
     
147. 
     
148.             if (mutation.type === 'attributes') {
     
149.                 const target = mutation.target;
     
150.                 if (target.id === 'imgzoom' && mutation.attributeName === 'style') {
     
151.                     const viewer = document.getElementById('imgzoom');
     
152.                     if (viewer && viewer.style.display !== 'none') {
     
153.                         setTimeout(() => {
     
154.                             addViewerKeyboardListener();
     
155.                             viewer.focus();
     
156.                         }, 150);
     
157.                     }
     
158.                 }
     
159.             }
     
160.         });
     
161.     });
     
162. 
     
163.     observer.observe(document.body, {
     
164.         childList: true,
     
165.         subtree: true,
     
166.         attributes: true,
     
167.         attributeFilter: ['style', 'class']
     
168.     });
     
169. 
     
170.     document.addEventListener('keydown', handleGlobalKeyDown, true);
     
171. 
     
172.     if (isImageViewerActive()) {
     
173.         setTimeout(() => {
     
174.             const viewer = document.getElementById('imgzoom');
     
175.             if (viewer) {
     
176.                 addViewerKeyboardListener();
     
177.                 viewer.focus();
     
178.             }
     
179.         }, 500);
     
180.     }
     
181. 
     
182.     document.addEventListener('click', (e) => {
     
183.         if (e.target && e.target.classList &&
     
184.             (e.target.classList.contains('imgclose') ||
     
185.              e.target.closest('.imgclose'))) {
     
186.             const viewer = document.getElementById('imgzoom');
     
187.             if (viewer && viewer.dataset.keyboardListenerAdded) {
     
188.                 viewer.removeEventListener('keydown', handleViewerKeyDown, true);
     
189.                 delete viewer.dataset.keyboardListenerAdded;
     
190.             }
     
191.         }
     
192.     }, true);
     
193. })();

复制代码

快捷切换图片还是挺实用的惹，浏览变得更方便了

喜欢查看小图的坛友应该更能用到这个脚本了

打上这个泥潭的看图时无法切图的缺点就解决了惹，正在利用脚本飞速进化

好耶，方便的脚本又加了一个=3=~
这下可以更开心地逛泥潭了

这个看图真的好方便的说，不用一张张点了

能用键盘控制很方便了，工作一整天用鼠标已经很累了

也是能节省很多时间惹，不用再再次点击图片了

擦，之前都没注意过原来discuz的图片浏览不带左右箭头的啊

很棒的脚本诶，小图点开看总觉得有点麻烦，这样一看就方便多了

0-0 快捷切换图片嘛~感觉这样对咸鱼方便好多呀~

挺方便的欸～省去退出再点击下一张的步骤了

帖子里面的图片太多的时候很需要了

这个脚本太方便了！键盘党狂喜！真的不喜欢一直搓触摸板惹 (╯▽╰ )

这个真的很实用诶 不用来回点开图片了

图片太多的时候确实很需要这种脚本

这种脚本对于看图多的帖子真是方便很多了啊

这个脚本很实用，看图更方便了，感谢楼主

相当实用的脚本呢，无论是操作还是观赏性都得到了极大的提升呢

这下切换图片变得方便多了，感谢楼主的制作与分享