根据鼠标位置自动滚动div

Question

根据鼠标位置自动滚动div

4

我希望能够使用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) 来设置滚动条的位置，但我想根据父元素的鼠标位置来实现。这样当鼠标完全移到右边时，最右边的图片会显示，当鼠标完全移到左边时，最左边的图片会显示。

我该如何做到这一点？

- Chris

可能是重复的问题：如何根据鼠标在其容器内的位置正确地滚动溢出的 div。 - Rob W

2个回答

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/

- Kolby

这个代码本身是完美的，但是当我将它应用到我的网站上时，它并没有滚动以显示所有的缩略图 - 请参见此链接：http://www.appletonthorne.co.uk/new/viewproperty.html - Chris

1

你需要自己计算一些数学问题，我只是想给你足够的基本功能来帮助你入门，而不是替你完成它。 - Kolby

明白了：100 应该是 $('#propertyThumbnails')[0].scrollWidth - parent.width() - 3。 - Chris

太好了，很高兴我能再次帮助你 :p - Kolby

好的，这个答案需要更高一些。Google上充满了交易链接...做得很好，谢谢您。 - Andy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

实现你所需的另一种略有不同的方法：

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为单位）上没有任何触摸灵敏度的区域，以避免用户的不满 :)