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

请尝试以下方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果图像被隐藏，则无法与其进行交互。如果它可见，你可以像这样使用scrollTo（）。

使用scrollTop（）
捕获当前滚动位置
var pos = $（'你的形象容器'）。scrollTop（）;
抓住图像容器的高度

var height = $（'你的形象容器'）。height（）;
添加两个值

var moveto = pos + height;
自动滚动到位置

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

然后滚动页面，这样可以看到最后500px的图像。如果这不能解决您的问题，整个页面的示例将会有所帮助。

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

5 个答案: