在mouseMove上水平滚动-较小的div中的宽div,带有溢出:隐藏(无法进行数学运算) [英] Horizontal scroll on mouseMove - wide div in smaller div with overflow:hidden (Can't get the math to work)
问题描述
我正在尝试绘制一条图像拇指的线",在鼠标移动"的位置滚动.我可以使用它,但是现在的问题是我想在侧面做一个填充",这样我就不必一直将鼠标一直移到侧面来查看第一个/最后一个拇指.但是我真的无法正常工作:/
这是我现在拥有的脚本:
// 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/
我希望我的问题已经足够清楚了,不知道如何解释,否则希望有人可以提供帮助:)
您的脚本不流畅,所以我用一种非常简单的方法完全对其进行了修改(对不起:)
:
实时演示 >
超级简单的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 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);
}
});
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,带有溢出:隐藏(无法进行数学运算)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!