☰

deviantART easy scroll

Scrolls image to middle and allows horizontal scroll on mouse move event

当前为 2014-05-31 提交的版本，查看 最新版本。

// ==UserScript==
// @name        deviantART easy scroll
// @description Scrolls image to middle and allows horizontal scroll on mouse move event
// @namespace   https://greasyfork.org/users/2366-graenfur
// @author      Graenfur
// @include     *deviantart.com*
// @version     3
// @grant       none
// ==/UserScript==


// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback){
    var script = document.createElement("script");
    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
    script.addEventListener('load', function() {
        var script = document.createElement("script");
        script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
        document.body.appendChild(script);
    }, false);
    document.body.appendChild(script);
}

function main() {
    // Note, jQ replaces $ to avoid conflicts.
    //console.log("There are " + jQ('a').length + " links on this page.");
    
    var b = jQ('body'), //body
        bw = b.width(), //body width
        ph = jQ('.dev-page-view'), //page holder
        ih = jQ('.dev-view-deviation'), //image holder
        sd = 0; //scrollable distance
    
    //force large images to be scrollable inline instead of making the whole page as wide as image
    jQ('<style>.view-mode-full_zoomed .dev-view-deviation{overflow-x:scroll;}</style>').appendTo('head');
    
    b.on("click mouseup",".dev-view-deviation img", function () {
        //refreshing variables
        ph = jQ('.dev-page-view');
        ih = jQ('.dev-view-deviation');
        
        var img = jQ(this), //image
            iw = img.attr("width"), //image width
            hasZoomIn = ph.hasClass("cursor-zoom-in"), //can be zoomed in
            hasZoomOut = ph.hasClass("cursor-zoom-out"); //can be zoomed out
            
        sd = iw - bw; //scrollable distance
        
        
        if(hasZoomIn && !hasZoomOut){
            jQ('html, body, .dev-view-deviation').stop().animate({
                scrollTop:(img.offset().top),
                scrollLeft:sd/2 //scrolls to zoomed images middle
            },400,function(){
                if(ph.hasClass('view-mode-full_zoomed')){ //after full zoom
                    b.addClass('animated'); //signal that mousemove can add scrolling
                }
            });
        }else if(hasZoomOut){
            jQ('html, body, .dev-view-deviation').stop().animate({
                scrollTop:0,
                scrollLeft:0
            },400);
            b.removeClass('scrollable animated');
        }
    });
    
    var mouseX = 0,
        sp = 0, //scroll position
        xp = 0; //x position
    b.on('mousemove','.dev-view-deviation',function(e){
        mouseX = e.pageX;
        mouseX += (mouseX-(bw/2))*0.3; //increases mousemove/scroll sensitivity closer to edges
        if(b.hasClass('animated')){
            b.addClass('scrollable'); //allows scrolling after image is zoomed
        }
    });
    
    //scroll easing loop
    var loop = setInterval(function(){
        if(b.hasClass('scrollable')){
            xp += (mouseX - xp) / 10; //easig
            sp = (xp/bw)*sd; //converts mouse position to scroll position
            jQ('.dev-view-deviation').scrollLeft(sp);
        }else{
            xp = bw/2; //force scrolling to start from middle instead of left edge
        }
    }, 20);
}

addJQuery(main);