mouseMove上的水平滚动 – 较小div中的宽div与溢出：隐藏（无法使数学工作）

我试图制作一个图像拇指的“线”，它在鼠标移动时滚动。 我得到了它的工作，但我现在的问题是，我想在侧面做一个“填充”，所以我不必将鼠标一直到两侧看到第一个/最后一个拇指。 但我真的无法让它工作：/

这是我现在的脚本：

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

你的脚本不流畅，所以我完全修改了它（对不起:)
用一个非常简单的方法：

现场演示

超级简单的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 */ }