☰

Next Image/Previous Image

Quick scroll to next/previous image on a page with n/p buttons

目前为 2015-07-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Next Image/Previous Image
  3. // @author arty <me@arty.name>
  4. // @namespace http://arty.name/
  5. // @version 2.0.5
  6. // @description  Quick scroll to next/previous image on a page with n/p buttons
  7. // @include *
  8. // ==/UserScript==
  9.  
  10. // This is a minor adaptation of arty's original, by joeytwiddle
  11.  
  12. // 2012/10 - Now sorting positions so out-of-order images do not break the sequence.
  13.  
  14. (function(){
  15.   // var forwardButton  = 102; // F
  16.   // var backwardButton = 114; // R
  17.   var forwardButton  = 110; // N
  18.   var backwardButton = 112; // P
  19.   var leeway = 2; // This is needed if you have zoomed out the page.  (We might try to set scrollTop to 100, but it will only move to 99.)
  20.  
  21.   var positions = [];
  22.  
  23.   document.addEventListener('keypress', function(event){
  24.     if (event.ctrlKey || event.shiftKey || event.altKey) return;
  25.     var code = event.keyCode || event.which;
  26.     if (code != backwardButton && code != forwardButton) return;
  27.     if (event.target.tagName && event.target.tagName.match(/input|select|textarea/i) || event.target.getAttribute('contenteditable')==="true") return;
  28.  
  29.     // We force a rescan of the page's images every time, for dynamic pages.
  30.     positions = [];
  31.     if (positions.length === 0) {
  32.       for (var index = 0; index < document.images.length; index++) {
  33.         var image = document.images[index];
  34.         if (image.width * image.height < 200*200) continue;
  35.         var ytop = getYOffset(image);
  36.         // Vertically centralise smaller images.
  37.         if (image.height && image.height < window.innerHeight) {
  38.           ytop -= (window.innerHeight - image.height)/2 | 0;
  39.         }
  40.         positions.push([index, ytop]);
  41.       }
  42.     }
  43.     positions.sort(function(a,b) {
  44.       return a[1] - b[1];
  45.     });
  46.  
  47.     var scroll = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  48.  
  49.     if (code === forwardButton) {
  50.       for (index = 0; index < positions.length; index++) {
  51.         if (positions[index][1] <= scroll + leeway) continue;
  52.         // Hard to detect which one our browser is using when we are at the top of the document.
  53.         // Because Chrome presents documentElement.scrollTop = 0 all the time!
  54.         // Likewise Firefox presents document.body.scrollTop = 0 all the time!
  55.         // Solution?  Just set both of them!
  56.         document.body.scrollTop = positions[index][1];
  57.         document.documentElement.scrollTop = positions[index][1];
  58.         return;
  59.       }
  60.     } else if (code === backwardButton) {
  61.       for (index = positions.length - 1; index >= 0; index--) {
  62.         if (positions[index][1] >= scroll - leeway) continue;
  63.         document.body.scrollTop = positions[index][1];
  64.         document.documentElement.scrollTop = positions[index][1];
  65.         return;
  66.       }
  67.     }
  68.  
  69.   }, false);
  70.  
  71.   function getYOffset(node) {
  72.     for (var offset = 0; node; offset += node.offsetTop, node = node.offsetParent);
  73.     return offset;
  74.   }
  75. })();