阅读:2902回复:4
请高手帮着写个脚本
希望高手能帮忙把reading blinds这个脚本改造成页面的暗夜风格。
在网上看到一个Liqube Night的Stylish脚本,可以让习惯晚上浏览网页的人减轻视觉,同时也可以减少对他人的妨碍。但是还是不够完善,详细情况如下。 在Liqube Night下的暗页效果(不足之处见图片上的说明)。 用reading blinds可以实现更好的效果,但是还是有不足,具体见图片及批注。 希望高手能将reading blinds的油猴脚本进行简化,只留其黑色透明遮罩的功能。 |
|
1楼#
发布于:2009-01-20 17:19
现将reading blinds的脚本代码贴上,以供参考。
1. // ==UserScript== 2. // @name Reading Blinds 3. // @namespace http://userscripts.org/ 4. // @author SUCCESS 5. // @description 护眼聚焦。“盖住”网页中不必要的区域,然后打开一扇适度的“阅读之窗”。 6. // @include * 7. // @version 3 8. // ==/UserScript== 9. var showed = false; 10. var visible = false; 11. var size = window.innerHeight * 0.2; // 默认阅读区高度是窗口高度的 20% 12. var top_cover, bottom_cover; 13. var clientY; 14. var setShortcutKeysAction = ''; 15. var show_hide_keycode, show_hide_shift, show_hide_ctrl, show_hide_alt; // 显示/隐藏 快捷键 16. var increase_keycode, increase_shift, increase_ctrl, increase_alt; // 扩大阅读区域 快捷键 17. var decrease_keycode, decrease_shift, decrease_ctrl, decrease_alt; // 缩小阅读区域 快捷键 18. var code2keyTable={'65':'A','66':'B','67':'C','68':'D','69':'E','70':'F','71':'G','72':'H','73':'I','74':'J','75':'K','76':'L','77':'M','78':'N','79':'O','80':'P','81':'Q','82':'R','83':'S','84':'T','85':'U','86':'V','87':'W','88':'X','89':'Y','90':'Z','48':'0','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6','55':'7','56':'8','57':'9','96':'Numpad 0','97':'Numpad 1','98':'Numpad 2','99':'Numpad 3','100':'Numpad 4','101':'Numpad 5','102':'Numpad 6','103':'Numpad 7','104':'Numpad 8','105':'Numpad 9','106':'Numpad *','107':'Numpad +','108':'Numpad Enter','109':'Numpad -','110':'Numpad .','111':'Numpad /','112':'F1','113':'F2','114':'F3','115':'F4','116':'F5','117':'F6','118':'F7','119':'F8','120':'F9','121':'F10','122':'F11','123':'F12','8':'BackSpace','9':'Tab','12':'Clear','13':'Enter','16':'Shift','17':'Control','18':'Alt','20':'Cape Lock','27':'Esc','32':'Spacebar','33':'Page Up','34':'Page Down','35':'End','36':'Home','37':'Left Arrow','38':'Up Arrow','39':'Right Arrow','40':'Down Arrow','45':'Insert','46':'Delete','144':'Num Lock','186':';:','187':'=+','188':',<','189':'-_','190':'.>','191':'/?','192':'`~','219':'[{','220':'\|','221':']}','222':'"'}; 19. // 注册 【设置 显示/隐藏 快捷键】 菜单 20. GM_registerMenuCommand('Reading Blinds - 设置 显示/隐藏 快捷键', function(){ 21. if(visible) hide(); 22. setShortcutKeysAction = 'show_hide'; 23. showShortcutKeySettings(); 24. }); 25. // 注册 【设置 扩大阅读区域 快捷键】 菜单 26. GM_registerMenuCommand('Reading Blinds - 设置 扩大阅读区域 快捷键', function(){ 27. if(visible) hide(); 28. setShortcutKeysAction = 'increase'; 29. showShortcutKeySettings(); 30. }); 31. // 注册 【设置 缩小阅读区域 快捷键】 菜单 32. GM_registerMenuCommand('Reading Blinds - 设置 缩小阅读区域 快捷键', function(){ 33. if(visible) hide(); 34. setShortcutKeysAction = 'decrease'; 35. showShortcutKeySettings(); 36. }); 37. // 初始化。读取各快捷键。 38. function init(){ 39. var keycodes, array; 40. 41. // 读取 显示/隐藏 快捷键 42. keycodes = GM_getValue('show_hide', 'alt+116'); 43. array = keycodes.split('+'); 44. show_hide_keycode = array[array.length - 1]; 45. show_hide_shift = keycodes.indexOf('shift') > -1; 46. show_hide_ctrl = keycodes.indexOf('ctrl') > -1; 47. show_hide_alt = keycodes.indexOf('alt') > -1; 48. 49. // 读取 扩大阅读区域 快捷键 50. keycodes = GM_getValue('increase', '107'); 51. array = keycodes.split('+'); 52. increase_keycode = array[array.length - 1]; 53. increase_shift = keycodes.indexOf('shift') > -1; 54. increase_ctrl = keycodes.indexOf('ctrl') > -1; 55. increase_alt = keycodes.indexOf('alt') > -1; 56. 57. // 读取 缩小阅读区域 快捷键 58. keycodes = GM_getValue('decrease', '109'); 59. array = keycodes.split('+'); 60. decrease_keycode = array[array.length - 1]; 61. decrease_shift = keycodes.indexOf('shift') > -1; 62. decrease_ctrl = keycodes.indexOf('ctrl') > -1; 63. decrease_alt = keycodes.indexOf('alt') > -1; 64. } 65. // 显示设置快捷键的界面 66. function showShortcutKeySettings(){ 67. var cover = document.getElementById('setShortcutKey'); 68. var message = document.getElementById('message'); 69. if (!cover) { 70. var cover = document.createElement('div'); 71. cover.setAttribute('id', 'setShortcutKey'); 72. cover.setAttribute('style', 'display: table; background: black; color: white; text-align: center; position: fixed; top:0; left:0; width:100%; height: 100%; opacity: .9; z-index:100;'); 73. var message = document.createElement('div'); 74. message.setAttribute('id', 'message'); 75. message.setAttribute('style', 'font-size: 200%; line-height: 1.5em; text-align: center; display: table-cell; vertical-align: middle; padding: 1em;'); 76. } 77. switch (setShortcutKeysAction) { 78. case 'show_hide': 79. message.innerHTML = '功能:显示/隐藏<br />当前快捷键:<font color="red">' + parse2keys(GM_getValue('show_hide','alt+116')) + '</font><br />按 ESC 键保存当前设置并退出'; 80. break; 81. case 'increase': 82. message.innerHTML = '功能:扩大阅读区域<br />当前快捷键:<font color="red">' + parse2keys(GM_getValue('increase','107')) + '</font><br />按 ESC 键保存当前设置并退出'; 83. break; 84. case 'decrease': 85. message.innerHTML = '功能:缩小阅读区域<br />当前快捷键:<font color="red">' + parse2keys(GM_getValue('decrease','109')) + '</font><br />按 ESC 键保存当前设置并退出'; 86. break; 87. } 88. cover.appendChild(message); 89. document.body.appendChild(cover); 90. } 91. // 关闭设置快捷键的界面 92. function hideShortcutKeySettings(){ 93. var cover = document.getElementById('setShortcutKey'); 94. cover.parentNode.removeChild(cover); 95. setShortcutKeysAction = ''; 96. } 97. // 将 keycode 转换成按键名称 98. function parse2keys(keycodes){ 99. var array = keycodes.split('+'); 100. array[array.length-1]=code2keyTable[array[array.length-1]] || ''; 101. return array.join('+'); 102. } 103. // 打开 护眼聚焦 104. function show(){ 105. if (!showed) { 106. top_cover = document.createElement('div'); 107. top_cover.setAttribute('style', 'background: black; width: 100%; position: fixed; left: 0; top: 0; opacity: .85; overflow: hidden; z-index: 100;'); 108. bottom_cover = document.createElement('div'); 109. bottom_cover.setAttribute('style', 'background: black; width: 100%; position: fixed; left: 0; bottom: 0; opacity: .85; overflow: hidden; z-index: 100;'); 110. var message = document.createElement('div'); 111. message.setAttribute('id', 'msgtip'); 112. message.setAttribute('style', 'text-align: right; padding: 1em; color: white;'); 113. message.innerHTML = '移动鼠标选择阅读区域。 “' + parse2keys(GM_getValue('increase', '107')) + '/' + parse2keys(GM_getValue('decrease', '109')) + '” 扩大/缩小阅读区域。 “' + parse2keys(GM_getValue('show_hide', 'alt+116')) + '” 显示/隐藏。'; 114. top_cover.appendChild(message); 115. document.body.appendChild(top_cover); 116. document.body.appendChild(bottom_cover); 117. 118. // 将阅读区移动到当前鼠标位置 119. render(clientY); 120. 121. showed = true; 122. } 123. else { 124. var message = document.getElementById('msgtip'); 125. message.innerHTML = '移动鼠标选择阅读区域。 “' + parse2keys(GM_getValue('increase', '107')) + '/' + parse2keys(GM_getValue('decrease', '109')) + '” 扩大/缩小阅读区域。 “' + parse2keys(GM_getValue('show_hide', 'alt+116')) + '” 显示/隐藏。'; 126. top_cover.style.display = ''; 127. bottom_cover.style.display = ''; 128. 129. // 将阅读区移动到当前鼠标位置 130. render(clientY); 131. } 132. 133. // 移动鼠标选择阅读区域 134. document.body.addEventListener('mousemove', function(event){ 135. clientY = event.clientY; 136. if (visible) 137. render(clientY); 138. }, false); 139. 140. visible = true; 141. } 142. // 关闭 护眼聚焦 143. function hide(){ 144. top_cover.style.display = 'none'; 145. bottom_cover.style.display = 'none'; 146. visible = false; 147. } 148. // 绘制阅读区域 149. function render(clientY){ 150. top_cover.style.height = clientY - size / 2 + 'px'; 151. bottom_cover.style.height = window.innerHeight - clientY - size / 2 + 'px'; 152. } 153. // 设置快捷键 154. window.addEventListener('keydown', function(event){ 155. switch (setShortcutKeysAction) { 156. // 显示/隐藏 157. case 'show_hide': 158. // ESC 退出 159. if (event.keyCode == 27) { 160. hideShortcutKeySettings(); 161. break; 162. } 163. show_hide_keycode = event.keyCode; 164. show_hide_shift = event.shiftKey; 165. show_hide_ctrl = event.ctrlKey; 166. show_hide_alt = event.altKey; 167. 168. var Keys = ''; 169. if (show_hide_shift) { 170. Keys += 'shift+'; 171. } 172. if (show_hide_ctrl) { 173. Keys += 'ctrl+'; 174. } 175. if (show_hide_alt) { 176. Keys += 'alt+'; 177. } 178. 179. var message = document.getElementById('message'); 180. message.innerHTML = '功能:显示/隐藏<br />当前快捷键:<font color="red">' + Keys + (code2keyTable[show_hide_keycode] || '') + '</font><br />按 ESC 键保存当前设置并退出'; 181. Keys += String(event.keyCode); 182. GM_setValue('show_hide', Keys); 183. break; 184. // 扩大阅读区域 185. case 'increase': 186. // ESC 退出 187. if (event.keyCode == 27) { 188. hideShortcutKeySettings(); 189. break; 190. } 191. increase_keycode = event.keyCode; 192. increase_shift = event.shiftKey; 193. increase_ctrl = event.ctrlKey; 194. increase_alt = event.altKey; 195. 196. var Keys = ''; 197. if (increase_shift) { 198. Keys += 'shift+'; 199. } 200. if (increase_ctrl) { 201. Keys += 'ctrl+'; 202. } 203. if (increase_alt) { 204. Keys += 'alt+'; 205. } 206. 207. var message = document.getElementById('message'); 208. message.innerHTML = '功能:扩大阅读区域<br />当前快捷键:<font color="red">' + Keys + (code2keyTable[increase_keycode] || '') + '</font><br />按 ESC 键保存当前设置并退出'; 209. Keys += String(event.keyCode); 210. GM_setValue('increase', Keys); 211. break; 212. // 缩小阅读区域 213. case 'decrease': 214. // ESC 退出 215. if (event.keyCode == 27) { 216. hideShortcutKeySettings(); 217. break; 218. } 219. decrease_keycode = event.keyCode; 220. decrease_shift = event.shiftKey; 221. decrease_ctrl = event.ctrlKey; 222. decrease_alt = event.altKey; 223. 224. var Keys = ''; 225. if (decrease_shift) { 226. Keys += 'shift+'; 227. } 228. if (decrease_ctrl) { 229. Keys += 'ctrl+'; 230. } 231. if (decrease_alt) { 232. Keys += 'alt+'; 233. } 234. 235. var message = document.getElementById('message'); 236. message.innerHTML = '功能:缩小阅读区域<br />当前快捷键:<font color="red">' + Keys + (code2keyTable[decrease_keycode] || '') + '</font><br />按 ESC 键保存当前设置并退出'; 237. Keys += String(event.keyCode); 238. GM_setValue('decrease', Keys); 239. break; 240. } 241. }, true); 242. window.addEventListener('keyup', function(event){ 243. if (setShortcutKeysAction != '') return; 244. // 显示/隐藏 245. if ((event.altKey == show_hide_alt) && (event.ctrlKey == show_hide_ctrl) && (event.shiftKey == show_hide_shift) && (event.keyCode == show_hide_keycode)){ 246. if (!visible) { 247. show(); 248. } 249. else { 250. hide(); 251. } 252. } 253. 254. // 调整阅读区域大小 255. // 放大阅读区域 256. else 257. if (visible && (event.altKey == increase_alt) && (event.ctrlKey == increase_ctrl) && (event.shiftKey == increase_shift) && (event.keyCode == increase_keycode)) { 258. if (size < window.innerHeight / 2) { 259. size += 5; 260. render(clientY); 261. } 262. } 263. // 缩小阅读区域 264. else 265. if (visible && (event.altKey == decrease_alt) && (event.ctrlKey == decrease_ctrl) && (event.shiftKey == decrease_shift) && (event.keyCode == decrease_keycode)) { 266. if (size > 10) { 267. size -= 5; 268. render(clientY); 269. } 270. } 271. }, true); 272. init(); |
|
2楼#
发布于:2009-01-20 17:19
reading blinds这种对比度极低的效果好? 你试试看半小时会不会眼睛疼呢。不疼我只能说你是神仙了。。。
|
|
3楼#
发布于:2009-01-20 17:19
在晚上看来reading blinds是很好的,可以适当地把它的透明度再调高些
|
|
4楼#
发布于:2009-01-20 17:19
我不太会写脚本,不过看上去把开头那句var size = window.innerHeight * 0.2的0.2改成0应该就可以了。。。
LN那个css也有解决方法,加一句img{opacity:.85} |
|