Question

我在jQuery中找不到像这里滚动div的任何例子：http://d3js.org

我有一个div（宽度：100％，高度：250px），里面有大约100张缩略图（150x150px）的照片。我想滚动它像d3js主页（垂直和水平）。

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

有人可以帮助我吗？

Answer 1

这是一种非常简单的技术，但是，为了对你公平，我无法找出用作搜索的技术的正确名称。我确定我以前见过教程。

秘诀在于，只需使用视图的宽度和高度之间的比例，就可以在移动鼠标时向上和向左拉出更大的内容。

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

});

Div按鼠标位置滚动（水平和垂直）

1 个答案: