悬停时图像滚动
Posted
技术标签:
【中文标题】悬停时图像滚动【英文标题】:Image scrolling on hover 【发布时间】:2018-05-30 09:18:03 【问题描述】:我想在 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>
如果有其他更好的方法,我也可以使用它。
【问题讨论】:
你不能在过渡时期做这样的事情。你可以试试JS 谢谢@TemaniAfif,但是还有其他的转换方式吗?我知道用 js 可以,但想用 css 试试。 我不认为您可以使用 CSS 动态获取元素的高度并将其转换为与calc
一起使用的值:这比样式更编程,这不是 CSS 的目的
我以为你不想使用 JS ...
检查我的最后一句话,谢谢 Temani。
【参考方案1】:
好的,你需要它只是一个图像而不是背景图像,要根据高度功能执行此过渡持续时间,请使用以下代码。
$('.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>
【讨论】:
【参考方案2】:如果您接受 JS 作为解决方案,那么您可以在不更改 html/CSS 结构的情况下添加以下代码:
function getHeight(url)
console.log(url);
var img = new Image();
img.src = url;
return 0.002*parseInt(img.height);
var e =$(".previewimg");
var tr = "all "+getHeight(e.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'))+"s ease-in-out";
console.log(tr);
e.css('transition',tr);
.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;
.previewimg:hover
background-position-y: 100%;
height: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<div class="previewimg"></div>
</div>
【讨论】:
这正是我想要的。谢谢!【参考方案3】:您实际上并没有为此使用 javascript。 它是 codepen :codepen.io 或者它是你的 css 代码:
.preview
width:300px;
height:300px;
overflow: hidden;
.previewimg
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://source.unsplash.com/500x1500/);
transition: background-position 2s ease-out;
.preview:hover .previewimg
background-position: 0 100%;
【讨论】:
【参考方案4】:您可以使用样式类名称添加其他正文元素。它制作了一个框,当我们将鼠标悬停时,徽标会发生变化。徽标在悬停时会发生变化。
*
box-sizing: border-box;
.logoses
text-align: center;
list-style: none;
.logoses .logo
width: 178px;
height: 75px;
background:
url('G:/touqeer/amp-landing-pages/assets/images/clients_logo.png') center top no-repeat;
margin: 0 2px 8px;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
transition: all .4s ease-in;
#amara
background-position: 5px -125px;
#amara:hover
background-position: 5px 0px;
#ge
background-position: -1486px -125px;
#ge:hover
background-position: -1486px -2px;
#nuance
background-position: -489px -124px;
#nuance:hover
background-position: -489px -1px;
#gilson
background-position: -329px -123px;
#gilson:hover
background-position: -329px 0px;
#pcs_wireless
background-position: -824px -125px;
#pcs_wireless:hover
background-position: -824px -2px;
#herbalife
background-position: -161px -123px;
#herbalife:hover
background-position:-161px 0px;
#pcf
background-position: -659px -125px;
#pcf:hover
background-position: -659px -2px;
#seimens
background-position: -991px -125px;
#seimens:hover
background-position:-991px -2px;
#melesta_games
background-position: -1156px -124px;
#melesta_games:hover
background-position: -1156px 1px;
#samsung
background-position: -1324px -123px;
#samsung:hover
background-position: -1324px 0px;
.center_pd
padding: 75px 0px;
.text_bottom
margin: 0px 0px 60px 0px;
.center_text
text-align: center;
.header
margin: 0px 0px 20px 0px;
h2
font-size: 30px ;
font-weight: 400;
color: #393939;
.prg
font-size: 16px;
color: #333;
font-family: Open Sans;
【讨论】:
请添加一些解释。以上是关于悬停时图像滚动的主要内容,如果未能解决你的问题,请参考以下文章
当博客加载更多图像时,mouseover 和 mouseout 淡入淡出效果停止