Javascript 基于鼠标位置的自动滚动div

我想使用jQuery根据鼠标位置自动滚动一个div

如果您看到这一点，您可以看到许多图像在可滚动的div中水平排列：

<div id="parent">
    <div id="propertyThumbnails">
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
    </div>
</div>

我发现您可以使用

$（“#container”）.scrollLeft（position）

来设置滚动条的位置，但我想根据父对象的鼠标位置来设置。这样，当鼠标完全位于右侧时，将显示最右侧的图像，当鼠标完全位于左侧时，将显示最左侧的图像

---

我如何才能做到这一点？

实现您所需的稍微不同的方法：

jQuery（函数（$）{
$（窗口）。加载（函数（）{
var$gal=$（“#属性缩略图”），
galW=$gal.outerWidth（真），
galSW=$gal[0]。滚动宽度，
wDiff=（galSW/galW）-1，//宽度差比
mPadd=60，//鼠标移动填充
阻尼=20，//鼠标移动响应柔软度
mX=0，//实际鼠标位置
mX2=0，//修改鼠标位置
posX=0，
mmAA=galW-（mPadd*2），//鼠标移动可用区域
mmAAr=（galW/mmAA）；//获取可用的mousemove fidderence比率
$gal.mousemove（函数（e）{
mX=e.pageX-$（this）.offset（）.left；
mX2=数学最小值（数学最大值（0，mX-mPadd），mmAA）*mmAAr；
});
setInterval（函数（）{
posX+=（mX2-posX）/damp；//芝诺悖论方程“捕捉延迟”
$gal.scrollLeft（posX*wDiff）；
}, 10);
});
});
#父级{
位置：相对位置；
保证金：0自动；
宽度：60%；
高度：260px；
}
#不动产伞形花序{
位置：相对位置；
溢出：隐藏；
背景：#444；
宽度：100%；
高度：262px；
空白：nowrap；
}
#属性UMBG{
垂直对齐：中间对齐；
身高：100%；
显示：内联；
左边距：-4px；
}
这至少会让你朝着正确的方向前进

var parent = $('#parent');
var img = $('img:first-child');

parent.on('mousemove', function(e) {
    mouseX = e.pageX
    img.css('margin-left',-mouseX/parent.width()*100);

});

这个可能的副本工作得很好，但是当我在我的网站上实现它时，它并没有滚动显示所有的缩略图-请看这里：你必须自己做一些计算，我只是想给你足够的基本功能让你开始，而不是为你做。明白了：100应该是
$（“#propertyThumbnails”）[0].scrollWidth-parent.width（）-3
非常好，很高兴我能帮上忙，再说一次：pWORKS，这个答案需要更高一点。谷歌有很多交易链接。。。干得好，谢谢谢谢你的回答，但是我的代码没法用，最后你的代码成功了，非常好。。。但只能在缩略图容器上运行…：）如果您注意，我使用
$gal.mousemove（函数（e）{
而不是
$gal
您可以使用父容器并调整代码。@RokoC.Buljan谢谢您的回答，这非常有效！一个问题：只有当鼠标位于我的区域（div）的左侧和右侧极限时，才可以激活滚动条吗？@Giobbo在这种情况下，您需要完全不同的代码。此外，您可以使用两个透明的DIV元素来触发滚动
var parent = $('#parent');
var img = $('img:first-child');

parent.on('mousemove', function(e) {
    mouseX = e.pageX
    img.css('margin-left',-mouseX/parent.width()*100);

});