Question

HI！

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

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

提前Thanx！

亚历

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

Answer 2

有两个现有的精彩jQuery插件可以完全满足您的需求：

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

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

数字1更精确，因为它具有更平滑的滚动动作，并且可以选择性地突出显示当前悬停在项目上的内容。

Answer 3

有一个名为Smooth Div Scroll的jQuery插件正是这样做的。它可以平滑地滚动内容，您可以通过将鼠标悬停在滚动条内的两个热点（左侧和右侧，可见或不可见）上来控制它。有一个无限滚动选项。

基于鼠标位置的平滑滚动（Jquery）

3 个答案: