在mouseMove上水平滚动-较小的div中的宽div，带有溢出:隐藏(无法进行数学运算)

超级简单的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 */}I'm trying to make a "line" of image thumbs, where it scrolls on mousemove. And I got it to work, but my problem now is that i wanted to make a "padding" on the sides so I doesn't have to have the mouse all the way out to the sides to see the first/last thumb. But I really really can't get it to work :/This is the script I have now:// MouseMove scrolling on thumbsvar 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); }});There are some of the places I've tried adding the offset (commented out inline), some of it gets it working in one end but not the other :/I'm pretty sure it's a problem in the math, but I can't figure out what I should do :/Here's a jsFiddle: http://jsfiddle.net/6CJfs/1/I hope I made my problem clear enough, not sure how to explain it otherwise, and hope someone can help :) 解决方案 You script is not smooth, so I modified it completely (sorry :) with a really simple approach: Super simple 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);});Add to 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 */} 这篇关于在mouseMove上水平滚动-较小的div中的宽div，带有溢出:隐藏(无法进行数学运算)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！