Плавная прокрутка в зависимости от положения мыши (Jquery) - PullRequest
Новая
       23

Плавная прокрутка в зависимости от положения мыши (Jquery)

4 голосов
/ 26 мая 2011

HI!

Я хотел бы создать плавный скроллер на основе положения мыши. Идея состоит в том, чтобы создать внешний div с фиксированной шириной. Содержание очень широкое и должно быть прокручено влево или вправо, в зависимости от положения мыши. Было бы здорово, если бы контент был «бесконечным» или «бесконечным». Контент представляет собой очень широкое изображение, которое повторяется «наизусть».

Кто-нибудь может мне помочь, создав это в jQuery?

Спасибо заранее!

Alex

Ответы [ 3 ]

12 голосов
/ 26 мая 2011

Вы можете установить изображение в качестве фона div и анимировать background-position с помощью jquery. ( и потому что это заинтересовало меня, вот реализация )

демо http://jsfiddle.net/gaby/72yhW/

HTML 

<div class="backdrop">
    <div class="direction left"></div>
    <div class="direction right"></div>
</div>

CSS 

.backdrop{
    position:relative;
    height:300px; /*could be anything really..*/
    width:400px; /*could be anything really..*/
    border:3px solid #6699ff;
    background: url('YOUR IMAGE PATH GOES HERE') 0 0 repeat-x;
}

.direction{
    position:absolute;
    width:50%;
    height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}

JQuery 

$(function(){
    var x=0,
        y=0,
        rate=0,
        maxspeed=10;
    var backdrop = $('.backdrop');

    $('.direction', backdrop).mousemove(function(e){
        var $this = $(this);
        var left = $this.is('.left');

        if (left){
            var w = $this.width();
            rate = (w - e.pageX - $(this).offset().left + 1)/w;
        }
        else{
            var w = $this.width();
            rate = -(e.pageX - $(this).offset().left + 1)/w;
        }
    });

    backdrop.hover(
        function(){
            var scroller = setInterval( moveBackdrop, 10 );
            $(this).data('scroller', scroller);
        },
        function(){
            var scroller = $(this).data('scroller');
            clearInterval( scroller );
        }
    );   

    function moveBackdrop(){
        x += maxspeed * rate;
        var newpos = x+'px '+y+'px';
        backdrop.css('background-position',newpos);
    }
});
2 голосов
/ 26 октября 2012

Существует два замечательных плагина jQuery, которые делают именно то, что вам нужно:

1) http://manos.malihu.gr/jquery-thumbnail-scroller

2) http://www.convergent -evolution.co.uk / resources / jquery-plugins / scrolling-carousel /

Число 1 более усовершенствовано, поскольку оно имеет более плавную прокрутку и может при желании выделить текущий элемент, находящийся над объектом.

1 голос
/ 29 марта 2012

Существует плагин jQuery под названием Smooth Div Scroll , который делает именно это.Он плавно прокручивает содержимое, и вы можете управлять им, наводя курсор мыши на две горячие точки (левую и правую, видимую или невидимую) внутри скроллера.Есть опция для бесконечной прокрутки.

...