javascript 根据鼠标位置自动滚动div

Auto scroll div based on mouse position

提问by Chris

I want to automatically scroll a div based on mouse position using jQuery.

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

If you see this fiddle here, you can see a number of images that are horizontally ordered in a div that is scrollable:

如果你在这里看到这个小提琴，你可以看到许多图像在可滚动的 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:

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; 
}

I found out that you can use $("#container").scrollLeft(position)to set the position of the scroller but I want to do it based on the mouse position of the parent. So that when the mouse is fully to the right hand side, the right most image displays, and when the mouse is fully left, the left most image displays.

我发现你可以$("#container").scrollLeft(position)用来设置滚动条的位置，但我想根据父级的鼠标位置来做。这样当鼠标完全到右手边时，最右边的图像显示，当鼠标完全离开时，最左边的图像显示。

How can I do this?

我怎样才能做到这一点？

回答by Roko C. Buljan

A slightly different way to achieve what you need:

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

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>

where mPaddis the area (in PX, at the left and right border zone) without any sensitivity to prevent user frustrations :)

mPadd没有任何敏感性的区域（在 PX 中，在左右边界区域）在哪里，以防止用户感到沮丧:)

回答by Kolby

this should at least get you headed in the right direction.

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

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/

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