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

div

background-position

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

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

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