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 */ 
}