Question

我想要显示一些布局，并且特色可能很长。我希望图像在悬停时滚动到顶部，因此在您进入网站之前可以看到布局。

现在我的转换设置为2秒，这也意味着如果一个布局比另一个布局更长，它会滚动得更快，这让我感到困惑。

它只是CSS，如果不可能，我不介意一些jquery。此外，图像仅滚动A标签高度的100％，而不是整个图像高度

这是我的榜样：

如果有更好的方法，我可以更改HTML标记。

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.container .item {
  width: calc(50% - 20px);
  background: lightblue;
}
.item a:first-child {
    position: relative;
    overflow: hidden;
    display: block;
    height: 400px;    
}
.item a:first-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all ease 2s;
}
.item:hover a:first-child img {
   top: -100%;
}

.item a:last-child {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}

＆＃13;

<div class="container">
  <div class="item">
    <a href="#layout-url">
      <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
    </a>
    <a href="#layout-url">Layout title</a>
   </div>
   <div class="item">
    <a href="#layout-url">
      <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
    </a>
    <a href="#layout-url">Layout title</a>
</div>

＆＃13;

Answer 1

我认为jQuery是你最好的选择，因为你需要围绕动画进行一些数学运算，而且最重要的是＆＃39;每个图像的值取决于高度。

这是一个codepen https://codepen.io/matthewblewitt/pen/dKJjyd

图片＆＃39; top＆＃39;和动画速度是通过它与项目高度的比率来计算的。

ps我已将其中一个图像设置为更大的高度，以显示它如何以不同的图像尺寸滚动。

＆＃13;

$('.item img').each(function(){
    var itemHeight = $('.item a:first-child ').outerHeight();
    var imgHeight = $(this).outerHeight();         
    // Work out what percentage the image is of the item and remove 100% from that
    var topHeight = (imgHeight/itemHeight)*100-100;
    //Make the animation speed proportional to that image/ item ratio
    var animationSpeed = (imgHeight/itemHeight)/2; //Change '2' to tweak the speed

    $(this).mouseleave(function(){
        $(this).css({
            top: '0'  
        });
    })
    
    // The 'top' property  of the image needs 
    // to be set as as a percentage of the parent
    $(this).mouseenter(function(e) { 
        $(this).css({
            top: '-'+topHeight+'%',
            transition: 'all ease '+animationSpeed+'s'
        });
    })
});

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.container .item {
  width: calc(50% - 20px);
  background: lightblue;
}
.item a:first-child {
    position: relative;
    overflow: hidden;
    display: block;
    height: 500px;    
}
.item a:first-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all ease 2s;
}
.item:hover a:first-child img {
   top: -100%;
}
.item a:last-child {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">
      <a href="#layout-url">
        <img height="2500" src="http://www.templatewire.com/img/templates/helios-l.jpg">
      </a>
      <a href="#layout-url">Layout title</a>
     </div>
     <div class="item">
      <a href="#layout-url">
        <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
      </a>
      <a href="#layout-url">Layout title</a>
  </div>

＆＃13;

在悬停时滚动相对标记内的绝对图像

1 个答案: