Desplazamiento de div por posición del mouse (horizontal y vertical)

I can't find any example in jQuery to scrolling div like here: http://d3js.org

I have a div (width: 100%, height:250px) and inside is around 100 thumbnails (150x150px) of photos. I want a scroll it like d3js homepage (vertical and horizontal).

I fond only horizontal scroll, but I don't know how to add vertical. Here: http://jsbin.com/alokat/180/edit

¿Alguien podría ayudarme?

preguntado el 16 de enero de 14 a las 15:01

1 Respuestas

This is a pretty simple technique but, to be fair to you, I couldn't figure out the right name for the technique to use as a search, either. I'm sure I've seen tutorials for it before.

The secret is in just using the ratio between the width and height of your view to pull its larger content up and to the left as you move your mouse around.

Demo en vivo

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

});

Respondido el 16 de enero de 14 a las 18:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.