根据鼠标位置自动滚动div

Question

我想使用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>

CSS：

#parent {
    height: 300px;
    width: 100%;
    background: #ddd;
}
#propertyThumbnails {
    background: #666;
    height: 80px;
    white-space: nowrap;
    overflow: scroll;
}
#propertyThumbnails img {
    width: 125px;
    height: 80px;
    display: inline-block;
    margin: 3px;
    margin-right: 0;
    opacity: 0.6; 
}

我发现你可以使用$("#container").scrollLeft(position)来设置滚动条的位置，但我想根据父级的鼠标位置来做。 因此，当鼠标完全位于右侧时，将显示最右侧的图像，当鼠标完全左侧时，将显示最左侧的图像。

我怎样才能做到这一点？

Answer 1

一种略微不同的方式来实现您的需求：

 jQuery(function($) { $(window).load(function() { var $gal = $("#propertyThumbnails"), galW = $gal.outerWidth(true), galSW = $gal[0].scrollWidth, wDiff = (galSW / galW) - 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 = galW - (mPadd * 2), // The mousemove available area mmAAr = (galW / mmAA); // get available mousemove fidderence ratio $gal.mousemove(function(e) { mX = e.pageX - $(this).offset().left; mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr; }); setInterval(function() { posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay" $gal.scrollLeft(posX * wDiff); }, 10); }); }); 

 #parent { position: relative; margin: 0 auto; width: 60%; height: 260px; } #propertyThumbnails { position: relative; overflow: hidden; background: #444; width: 100%; height: 262px; white-space: nowrap; } #propertyThumbnails img { vertical-align: middle; height: 100%; display: inline; margin-left: -4px; } 

 <div id="parent"> <div id="propertyThumbnails"> <img src="//placehold.it/600x400/0bf" /> <img src="//placehold.it/600x400/f0b" /> <img src="//placehold.it/600x400/0fb" /> <img src="//placehold.it/600x400/b0f" /> <img src="//placehold.it/600x400/bf0" /> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

其中mPadd是区域（在PX中，在左右边界区域），没有任何敏感性，以防止用户挫折:)

Answer 2

这应该至少让你朝着正确的方向前进。

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

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

});

http://jsfiddle.net/xWcXt/4/