股利滾動通過鼠標位置（水平和垂直）

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' 
    }); 

});