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

Question

HI!

我想基于鼠标位置创建一个平滑滚动条.我们的想法是创建一个固定宽度的外部div.内容非常宽,必须根据鼠标位置向左或向右滚动.如果内容是"无限的"或"无限的",那将是很棒的.内容是一个非常宽的图像,重复'seamelesly'.

任何人都可以通过在jQuery中创建它来帮助我吗？

Thanx提前!

亚历克斯

Answer 1

您可以将图像设置为背景,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);
    }
});