基于鼠标位置的平滑滚动条(jQuery) [英] Smooth scroller based on mouse position (Jquery)

问题描述

嗨！

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

I would like to create a Smooth scroller based on mouse position. The idea is to create a outer div with a fixed width. The content is very wide and has to be scrolled to left or right, based on the mouse position. It would be great if the content is 'infinite' or 'endless'. The content is a very wide image that repeats 'seamelesly'.

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

Can anybody help me by creating this in jQuery?

先谢谢！

亚历克斯

推荐答案

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

You can set the image as the background of the div and animate the background-position with jquery. (and because it got me interested, here is an implementation)

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

这篇关于基于鼠标位置的平滑滚动条(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！