Question

我想一次滑动3张图片，从左侧轻松地滑入红色div。当图像不在div中时，它们不应该是可见的

这是我希望实现的开始和结束结果。红色矩形是父div，黑色矩形是我想要滑入的图像。

知道如何解决这个问题吗？

HTML:

<div id="container">
<img src="black"><img src="black"><img src="black">
</div>

CSS:

#container {
width:380px;
height: 200px;
background-color:red;

}
img{
    width:30px;
    height: 50px;
}

Answer 1

这是一个非常粗略的例子，但我想敲一个快速演示，指出你正确的方向。你需要进一步发展这一点，但我知道这可能很难开始。

小提琴：https://jsfiddle.net/ed034mrs/

您根本不需要Javascript，可以使用CSS动画执行此操作。动画是左边的一个简单的幻灯片，我把这些项目拖延了。

HTML：

<div class="outer">
  <div class="inner">
    <img src="" alt="">
  </div>

  <div class="inner">
    <img src="" alt="">
  </div>

  <div class="inner">
    <img src="" alt="">
  </div>
</div>

CSS：

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.outer {
  width: 380px;
  height: 200px;
  background-color: red;
  overflow: hidden;
}

.inner {
  width: 33.33%;
  height: 100%;
  float: left;
  position: relative;
  display: block;
  transform: translateX(-1000%);
  -webkit-animation: slide-in 1s forwards;
}

.inner:nth-child(1) {
  -webkit-animation-delay: 2s;
}

.inner:nth-child(2) {
  -webkit-animation-delay: 1s;
}

img {
  width: 30px;
  height: 50px;
  background-color: black;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -15px;
}

Answer 2

您可以先设置大的负A+, A-, B+, B, B-, E, F, F-以从窗口中删除图像，然后使用边距上的margin-left通过使用每个图像的延迟和索引逐个图像滑动图像。

＆＃13;

animate

＆＃13;

$('img').css('margin-left', '-200vw')

$('img').each(function(i) {
  $(this).delay(i * 500).animate({
   'margin-left': 25
  }, 1000)
})

＆＃13;

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.content {
  background: gray;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red {
  background: #B53535;
  width: 400px;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

＆＃13;

如果您可以设置<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="red"> <img src="http://placehold.it/100x100"> <img src="http://placehold.it/100x100"> <img src="http://placehold.it/100x100"> </div> </div>会更容易，但我猜js会影响flexbox，所以这会发生DEMO

Answer 3

这是我的尝试，相当混乱，但我希望它能为您提供更多选择。

我将黑盒子放在容器外面并将溢出设置为隐藏，这样就无法在容器外看到它们。然后在CSS中，当容器悬停时，我希望第一，第二和第三个图像向右移动。

第二和第三张图像也有转换延迟。转换的长度仅为1秒，如img选择器中所示，因此它们将一次显示一个。

＆＃13;

.greyBackground {
 background-color: grey;
}

#container {
 margin:auto;
 position: relative;
 width:380px;
 height: 200px;
 background-color:#B53535;
 overflow: hidden;
}

img{
 position: relative;
 display:inline-block;
 background-color: black;
 width:70px;
 height: 90px;
 top:40px;
 right: 220px;
 transition: right 1s ease-out;
 -webkit-transition: right 1s ease-out;
 -moz-transition: right 1s ease-out;
 -o-transition: right 1s ease-out;
}

#container:hover > img:nth-of-type(1) {
 right: -20px;
}

#container:hover > img:nth-of-type(2) {
 right: -80px;;
 transition-delay: 1s;
}

#container:hover > img:nth-of-type(3) {
 right: -140px;
 transition-delay: 2s;
}

＆＃13;

<div class="greyBackground">
 <div id="container">
    <img src="">
    <img src="">
    <img src="">
 </div>
</div>

＆＃13;

将图片幻灯片放入div元素

3 个答案: