我想在 div 中制作一个图像,以便在悬停时向下滚动。那部分正在工作。
此外,如果图像较长,我需要让它滚动得更长,因此我试图在过渡中使用 calc,但它不起作用。
这是我的代码:
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-
content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
transition: all calc(0.02s * height) ease-in-out;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
transition: all calc(0.02s * height) ease-in-out;
}
<div class="preview">
<div class="previewimg"></div>
</div>
如果有其他更好的方法来做到这一点,我也可以使用它。
最佳答案
好的,为此您需要它只是一个图像而不是背景图像,要根据高度功能执行此过渡持续时间,请使用以下代码。
$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");
.preview {
position: relative;
width: 75%;
height: 300px;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.preview .previewimg {
width: 100%;
height: auto;
transform: translateY(0px);
}
.preview:hover .previewimg {
transform: translateY(calc(-100% + 300px));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>
关于css - 悬停时图像滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47844603/