股利滚动通过鼠标位置（水平和垂直）

Question

我无法找到任何jQuery的例子来滚动DIV像这里：http://d3js.org

我有一个div（宽度：100％，高度：250像素）和内部是大约100张缩略图（150x150像素）的照片。我想要一个滚动它像d3js主页（垂直和水平）。

我喜欢只有水平滚动，但我不知道如何添加垂直。这里：http://jsbin.com/alokat/180/edit

任何人都可以帮助我吗？

Answer 1

这是一个非常简单的技术，但为了公平对待您，我无法弄清楚该技术用作搜索的正确名称。我确信我以前见过它的教程。

秘诀在于，只需使用视图的宽度和高度之间的比率，即可在您移动鼠标时将较大的内容向上拉到左侧。

Live Demo

var $win = $(window); 
var $log = $('#log'); 
var $view = $('.view'); 
var $content = $view.find('.content'); 
var images = 100; 
var width = (images/4) * 102; 

$content.width(width); 

$view.css({ 
    'margin-top': $win.height()/4, 
    height: $win.height()/2 

}); 

// generate some content 
for (var i = 0; i < 100; i += 1) { 
    var $image = $('<image>', { 
     src: 'http://placekitten.com/100/100/' 
    }); 

    $image.appendTo($content); 
} 

$view.on('mousemove', function (event) { 
    var $this = $(this); 
    var parentOffset = $this.parent().offset(); 
    var mouseX = event.pageX - parentOffset.left; 
    var mouseY = event.pageY - parentOffset.top; 

    $log.text(mouseX + ', ' + mouseY); 

    var viewRangeX = $this.width(); 
    var viewRangeY = $this.height(); 

    var contentRangeX = $content.outerWidth(true); 
    var contentRangeY = $content.outerHeight(true); 

    var ratioX = contentRangeX/viewRangeX; 
    var ratioY = contentRangeY/viewRangeY; 

    var differenceX = contentRangeX - viewRangeX; 
    var differenceY = contentRangeY - viewRangeY; 

    var offsetX = (mouseX * ratioX) - mouseX; 
    var offsetY = (mouseY * ratioY) - mouseY; 

    $content.css({ 
     top: (offsetY * -1) + 'px', 
     left: (offsetX * -1) + 'px' 
    }); 

});