mouseMove上的水平滚动 - 带有溢出的较小div的宽div：隐藏（无法让数学运行）

Question

我正在尝试制作图像大拇指的“行”，它在mousemove上滚动。我已经开始工作了，但现在我的问题是，我想在两侧做一个“填充”，所以我不需要将鼠标一直放到两侧看第一个/最后一个拇指。但我真的真的无法得到它的工作：/

这个剧本我现在有：

// MouseMove scrolling on thumbs 
var box = $('.thumbs-block'), 
    innerBox = $('.thumbs'), 
    lastElement = innerBox.find('a:last-child'); 

var offsetPx = 100; 
var boxOffset = box.offset().left; 

var boxWidth = box.width() /* - (offsetPx*2)*/; 
var innerBoxWidth = (lastElement[0].offsetLeft + lastElement.outerWidth(true)) - boxOffset /* + (offsetPx*2)*/; 

scrollDelayTimer = null; 
box.mousemove(function (e) { 
    console.log('boxWidth: ' + boxWidth + ' innerBoxWidth: ' + innerBoxWidth + ' box.scrollLeft(): ' + box.scrollLeft()); 

    var mouseX = e.pageX; 
    var boxMouseX = mouseX - boxOffset; 

    if ((boxMouseX > offsetPx) && (boxMouseX < (boxWidth - offsetPx))) { 
     var left = (boxMouseX * (innerBoxWidth - boxWidth)/boxWidth) /* - offsetPx*/; 

     clearTimeout(scrollDelayTimer); 
     scrollDelayTimer = setTimeout(function() { 
      scrollDelayTimer = null; 
      box.stop().animate({ 
       "scrollLeft": left 
      }, { 
       queue: false, 
       duration: 500, 
       easing: 'linear' 
      }); 
     }, 10); 
    } 
}); 

有一些我已经试过把偏移（注释掉在线）的地方，它的一些得到它在一端的工作而不是其他：/

我敢肯定它在数学问题，但我想不出我应该做的：/

这里的jsFiddle：http://jsfiddle.net/6CJfs/1/

我希望我让我的问题清楚，不知道如何解释，否则，并希望有人可以帮助:)

Answer 1

你脚本不光滑，所以我完全修改它（对不起:)
一个非常简单做法：

LIVE DEMO

超级简单JQ：

$(function(){ 

    var $bl = $(".thumbs-block"), 
     $th = $(".thumbs"), 
     blW = $bl.outerWidth(), 
     blSW = $bl[0].scrollWidth, 
     wDiff = (blSW/blW)-1, // widths difference ratio 
     mPadd = 60, // Mousemove Padding 
     damp = 20, // Mousemove response softness 
     mX  = 0, // Real mouse position 
     mX2 = 0, // Modified mouse position 
     posX = 0, 
     mmAA = blW-(mPadd*2), // The mousemove available area 
     mmAAr = (blW/mmAA); // get available mousemove fidderence ratio 

    $bl.mousemove(function(e) { 
     mX = e.pageX - this.offsetLeft; 
     mX2 = Math.min(Math.max(0, mX-mPadd), mmAA) * mmAAr; 
    }); 

    setInterval(function(){ 
     posX += (mX2 - posX)/damp; // zeno's paradox equation "catching delay"  
     $th.css({marginLeft: -posX*wDiff }); 
    }, 10); 

}); 

加入CSS：

.thumbs-block { 
    position:relative; /* THIS LINE */ 
    overflow: hidden; 
    background: #ccc; 
    margin: 0 5px; 
    width: 714px; 
    height:142px;  /* THIS LINE */ 
} 
.thumbs{ /* ALL */ 
    position:absolute; 
    margin-left:0;  /* WILL BE CONTROLLED BY jQ */ 
}