jquery - 基于鼠标位置的平滑滚动(Jquery)

Question

嗨!

我想创建一个基于鼠标位置的平滑滚动条。这个想法是创建一个具有固定宽度的外部 div。内容非常宽，必须根据鼠标位置向左或向右滚动。如果内容是“无限”或“无尽”的，那就太好了。内容是一个非常宽的图像，“无缝”地重复。

有人可以帮我用 jQuery 创建这个吗？

提前致谢!

亚历克斯

Answer 1

您可以将图像设置为 div 的背景，并使用 jquery 对 background-position 进行动画处理。 (因为它引起了我的兴趣，所以这里是一个实现)

演示 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);
    }
});