根据鼠标位置自动滚动div [英] Auto scroll div based on mouse position

问题描述

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

I want to automatically scroll a div based on mouse position using 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 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)来设置滚动条的位置，但是我想基于父级的鼠标位置来设置滚动条.这样，当鼠标完全位于右侧时，将显示最右侧的图像，而当鼠标完全位于左侧时，将显示最左侧的图像.

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.

我该怎么做?

推荐答案

一种实现所需内容的方式略有不同:

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>

其中mPadd是没有任何敏感度以防止用户感到沮丧的区域(在PX中，位于左边界区域和右边界区域)

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

这篇关于根据鼠标位置自动滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！