如何使元素浮动到视口外?

时间:2016-01-30 19:42:16

标签: jquery html css

我正在制作这张幻灯片。容器装有4个元件。第四个元素应该继续在边界之外,这样就可以产生无限滚动的错觉。如何将元素从屏幕左侧“堆叠”到超出右侧的位置?

如果你明白我的意思,也许你会有更好的想法:https://gyazo.com/20ef49b4bd1987baf421e92824e82cb1

两个元素是相同的。

HTML:

<section class="photo-grid-slideshow">
    <div class="photo-crop">
        <h3>With you
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
    </div>
    <div class="photo-crop">
        <h3>I wanna
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>Dance
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>With you
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
    </div>
</section>

的CSS:

.photo-grid-slideshow {
    height: 300px;
    display: inline-block;
    min-width: 100%;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
    background: #444;
}

.photo-crop {
    display: inline-block;
    overflow: hidden;
    float: left;
    width: calc(100% / 3);
    height: 100%;
    padding: 0;
    position: relative;
    background-position: center center;
    background-size: cover;
    text-align: left;
}

脚本:

$(function(){
setInterval(function(){
        $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: "-=421px"}, 2000, "linear", function(){
            $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        })
    }, 2500);
});

1 个答案:

答案 0 :(得分:0)

您可以使用if(filename == "Ace.jpg") { // display label label.text = "Ace" } 的负值和margin-left width的较大值来执行此操作:

&#13;
&#13;
ul
&#13;
body{
  background-color: #EFEFEF;
}
.container{
  overflow: hidden;
}
.list{
  margin-left: -80px;
  list-style: none;
  width: 9999px;
  height: 160px;
  background-color: #FFDDDD;
}
.list li{
  width: 100px;
  height: 100px;
  background-color: #CDCDFF;
  padding: 20px;
  margin: 10px;
  float: left;
}
&#13;
&#13;
&#13;

更新

在您编辑问题后,我添加了此更新以涵盖新问题:

<div class="container">
  <ul class="list">
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
  </ul>
</div>