如何在悬停时滚动到图像底部

Question

您好，我很想知道在悬停时滚动到图像底部的最佳方法。该图像位于一个包装器中，溢出隐藏应用到它很长。理想情况下，平滑滚动到底部是我要查看隐藏图像的其余部分的内容。

我一直在玩 jquery 试图让它工作，但我陷入了混乱。不确定我的代码是否在正确的轨道上。

感谢任何帮助

$('#image-wrap img').on('hover', function() {
  var target = $(this),
    height = target.height(),
    scrollHeight = target.prop('scrollHeight');

  target.animate({
    scrollTop: scrollHeight - height
  }, 2000);
});

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  position: relative;
}

#image-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#image-wrap img {
  position: absolute;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
      <div id="image-wrap">
        <img src="http://via.placeholder.com/600x2000" />
      </div>
    </div>
  </div>
</div>

Answer 1

您可以简单地使用 CSS3。在悬停时添加过渡transform: translateY(-100%)，但它不像 jquery 解决方案那样聪明。

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  overflow: hidden;
}

img {
    transition: all 2000ms ease-out;
}

#box:hover img {
    transform: translateY(-100%);
}

<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
        <img src="http://lorempixel.com/400/1000/sports/" />
    </div>
  </div>
</div>

Answer 2

我现在明白你想要的样子了。

HTML

$(document).ready(function(){
  $('#img-holder').mouseenter(function(){
    var x = $('img').height();
    x = x-400;
    $('img').animate({'position':'absolute','top':'-'+x}, 300);
  });
   $('#img-holder').mouseleave(function(){
     $('img').css({'position':'relative','top':'0'});
   });
});

#img-holder{
  width:100%;
  height:400px;
  border:2px solid;
  overflow:hidden;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-holder">
  <img src="https://blog.hittail.com/wp-content/uploads/sites/8/2013/01/hidden-value-of-long-tail-seo-1000.png" width="100%">
</div>

这个想法是让img的位置绝对，并给它一个值来显示底部。

这是一个有效的DEMO

Answer 3

请尝试以下方法：

$('#image-wrap img').hover(function() {
  $('html, body').animate({
        scrollTop: $(this).offset().top + $(this).outerHeight()
    }, 2000);
});

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  position: relative;
}

#image-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#image-wrap img {
  position: absolute;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
      <div id="image-wrap">
        <img src="http://via.placeholder.com/600x2000" />
      </div>
    </div>
  </div>
</div>

Answer 4

如果图像被隐藏，您将无法与之交互。如果它是可见的，你可以像这样使用scrollTo()。

1. 使用 scrollTop() 捕获当前滚动位置

   var pos = $('你的图片容器').scrollTop();

2. 抓取图片容器的高度

   var height = $('你的图片容器').height();

3. 将两个值相加

   var moveto = pos + height;

4. 自动滚动到该位置

   window.scrollTo(0, moveto);

Answer 5

所以我猜你想滚动整个页面（有点像使用鼠标滚轮）？

你可以这样做：

$('#image-wrap img').on('hover', function() {
  var target = $(this),
    height = target.height(),
    scrollHeight = target.offset().top;

    $('body,html').animate({
         scrollTop:scrollHeight+height-500
    },500);
});

这将滚动页面，因此图像的最后 500 像素可见。如果这不能解决您的问题，整个页面的示例会很有帮助。