如何創建帶有影像氣泡的滾動影像拼貼畫？-有解無憂

我想創建一個帶有影像氣泡的滾動影像拼貼。

我想要這樣

我完成了設計，但我無法理解如何連續滑動這些圖片。我的意思是自動旋轉木馬滑塊。請幫我。

var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
}

div#container {
  width: 1150px;
  padding: 5px;
  margin: 15px auto;
  display: block;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}

.wrapper {
  width: 100%;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

.images {
  width: 100%;
  height: 175px;
  position: relative;
}

.images2 {
  width: 100%;
  height: 175px;
  display: block;
  position: relative;
}

.images3 {
  width: 100%;
  display: block;
  height: 175px;
  position: relative;
}

.image1 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/1.jfif);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image2 {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image3 {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

@keyframes upDown{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(8px);
  }
  100%{
      transform: translateY(0px);
  }
}



.image4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image5 {
  position: absolute;
  top: 0%;
  left: 33%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image6 {
  position: absolute;
  top: 0%;
  left: 70%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 5s infinite;
}


@keyframes upDown2{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(-8px);
  }
  100%{
      transform: translateY(0px);
  }
}



.image7 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image8 {
  position: absolute;
  top: 0%;
  left: 54%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image9 {
  position: absolute;
  top: 0%;
  left: 88%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/9.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

@keyframes upDown3{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(8px);
  }
  100%{
      transform: translateY(0px);
  }
}

<div id="container">
        <div class="wrapper">
            <div class="images">
                <div class="image1"></div>
                <div class="image2"></div>
                <div class="image3"></div>
            </div>
            <div class="images2">
                <div class="image4"></div>
                <div class="image5"></div>
                <div class="image6"></div>
            </div>
            <div class="images3">
                <div class="image7"></div>
                <div class="image8"></div>
                <div class="image9"></div>
            </div>
        </div>
    </div>

uj5u.com熱心網友回復：

考慮以下。這不是執行此操作的唯一方法，但它可能會幫助您找到解決方案。

$(function() {
  var speed = 1;
  var canvas = $(".wrapper");

  function float(el) {
    var left = $(el).position().left;
    var top = $(el).position().top;
    left -= (speed   Math.random());
    top = top   (Math.random() < 0.5 ? -1 : 1);
    if (left < (0 - $(el).width())) {
      // Element is offscreen
      $(el).css("left", "115%");
    } else {
      $(el).animate({
        left: left,
        top: top
      });
    }
  }

  var timer = setInterval(function() {
    $("[class^='image']").each(function() {
      float(this);
    });
  }, 600);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
}

div#container {
  width: 1150px;
  padding: 5px;
  margin: 15px auto;
  display: block;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}

.wrapper {
  width: 100%;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

div[class^='row'] {
  width: 100%;
  height: 175px;
  position: relative;
}

div[class^='image'] {
  position: absolute;
  top: 0%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}

div.large {
  width: 150px;
  height: 150px;
}

.image1 {
  left: 15%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}

.image2 {
  left: 50%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}

.image3 {
  left: 85%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}

.image4 {
  left: 115%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}

.image5 {
  left: 0%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}

.image6 {
  left: 33%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}

.image7 {
  left: 66%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}

.image8 {
  left: 100%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
}

.image9 {
  left: 15%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=9);
}

.image10 {
  left: 50%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=10);
}

.image11 {
  left: 85%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=11);
}

.image12 {
  left: 115%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=12);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="wrapper">
    <div class="row-1">
      <div class="image1"></div>
      <div class="image2"></div>
      <div class="image3"></div>
      <div class="image4"></div>
    </div>
    <div class="row-2">
      <div class="image5 large"></div>
      <div class="image6 large"></div>
      <div class="image7 large"></div>
      <div class="image8 large"></div>
    </div>
    <div class="row-3">
      <div class="image9"></div>
      <div class="image10"></div>
      <div class="image11"></div>
      <div class="image12"></div>
    </div>
  </div>
</div>

我們使用 jQuery Animate，而不是使用 CSS 來為運動設定影片。

uj5u.com熱心網友回復：

如果您能夠設定 HTML，則不需要使用 Javascript。

一個簡單的方法是確保您有足夠的要滾動的材料副本，并且其中一半至少可以覆寫您需要支持的最大螢屏尺寸。

內置的 1150 寬度對于一些常見的螢屏來說太窄了，所以這個片段有 4 個副本，將它們向左移動 50%，然后回到初始位置，這樣它看起來是連續的，你可以離開 CSS（和希望設備的 GPU）來保持影片的進行。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
  overflow: hidden;
}

div#container {
  width: calc(1150px * 4);
  display: flex;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
  animation: moveleft 60s infinite linear;
}

.block1,
.block2 {
  display: flex;
}

.wrapper {
  background: ;
  display: inline-block;
  rwidth: 100vw;
  width: 1150px;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

@keyframes moveleft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.images {
  width: 100%;
  height: 175px;
  position: relative;
}

.images2 {
  width: 100%;
  height: 175px;
  display: block;
  position: relative;
}

.images3 {
  width: 100%;
  display: block;
  height: 175px;
  position: relative;
}

.image1 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/1.jfif);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image2 {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image3 {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.image4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image5 {
  position: absolute;
  top: 0%;
  left: 33%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image6 {
  position: absolute;
  top: 0%;
  left: 70%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 5s infinite;
}

@keyframes upDown2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.image7 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image8 {
  position: absolute;
  top: 0%;
  left: 54%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image9 {
  position: absolute;
  top: 0%;
  left: 88%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/9.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

@keyframes upDown3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

<div id="container">
  <div class="block1">
    <div class="wrapper" style="/*background: cyan;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
    <div class="wrapper" style="/*background: lime;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
  </div>
  <div class="block2">
    <div class="wrapper" style="/*background: mauve;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
    <div class="wrapper" style="/*background: yellow;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326593.html

標籤：javascript html 查询 css

上一篇：使用CSS將AgGrid控制元件的組標題中的文本垂直居中？

下一篇：如何在不弄亂邊框的情況下在表格行上添加洗掉線