代码之家 › 专栏 › 技术社区 › Velimir Lazarevic

悬停时滚动图像

transition css-animations css-transitions hover css

2

Velimir Lazarevic · 技术社区 · 8 年前

我想在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>

如果有其他更好的方法,我也可以使用它。

4 回复 | 直到 5 年前

1

5

Naren Murali 8 年前

好的,要做到这一点,你需要它只是一个图像而不是背景图像,要根据高度功能进行此转换持续时间,请使用以下代码。

$('.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

3

Temani Afif 8 年前

如果您接受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

1

OuzKagan 6 年前

实际上,您并没有使用javascript。代码笔: 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

-1

Martijn Pieters 5 年前

可以使用样式类名称添加其他主体元素。它制作了一个框,当我们悬停时,标志会改变。该标志在悬停时更改。

*{
    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;
}