悬停时图像滚动

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 淡入淡出效果停止

当object-ft:cover和object-position:center top时如何在网格内滚动图像的高度

当只有按钮悬停时激活悬停在按钮内的图像上?

在图像悬停时以圆形设置背景大小