html 如何使一个无限的股票代码线只有一个图像？

gr8qqesn 于 2023-11-15 发布在其他

关注(0)|答案(3)|浏览(125)

我几乎按预期工作。然而，由于只有一个图像，当动画到左侧时，右侧会打开一个间隙。我需要的是，股票代码行总是用相同的图像填充，没有任何间隙。如果图像比容器窄，它应该向左和向右重复。
任何帮助或指导都非常感谢。

const tickerImage = document.getElementById('ticker-image');
const tickerLink = document.getElementById('ticker-link');
let isRotating = true;
tickerLink.addEventListener('click', function(e) {
  if (isRotating) {
    e.preventDefault(); // Prevent the link from navigating if it's rotating
  }
});
tickerLink.addEventListener('mouseover', function() {
  isRotating = false;
  tickerImage.style.animationPlayState = 'paused';
});
tickerLink.addEventListener('mouseout', function() {
  isRotating = true;
  tickerImage.style.animationPlayState = 'running';
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.ticker-content {
  text-decoration: none;
  display: block;
  width: 100%;
  /* Set the width to 100% */
  height: 100%;
  /* Set the height to 100% */
  position: relative;
  overflow: hidden;
}
.image-container {
  display: flex;
  width: 100%;
  white-space: nowrap;
  animation: slideImage 10s linear infinite;
}
.image-container img {
  display: inline-block;
  width: 100%
}
@keyframes slideImage {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="ticker">
  <a href="https://example.com" target="_blank" class="ticker-content" id="ticker-link">
    <div class="image-container">
      <img src="https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg" alt="Rotating Image" id="ticker-image">
    </div>
  </a>
</div>

Html

来源：https://stackoverflow.com/questions/77444796/how-to-make-an-infinite-ticker-line-with-only-one-image

3条答案

按热度按时间

2jcobegt1#

background-size：cover;您可以在.tickercontent中尝试此属性

赞(0）回复(0）举报 2023-11-15

k75qkfdt2#

* {
        overflow: hidden;
      }
      .test {
        display: flex;
        background-image: url("https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg");
        background-repeat: no-repeat;
        background-size: contain;
      }
      #ticker-image {
        width: 100%;
        animation: slideImage 10s linear infinite;
      }
      @keyframes slideImage {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

个字符

展开查看全部

赞(0）回复(0）举报 2023-11-15

hgc7kmma3#

JavaScript和CSS来创建一个从右向左动画的图像的滚动条效果。我注意到你只使用了一个图像元素，这会导致当它到达容器的左侧时出现一个间隙。
要解决此问题，您可以尝试使用两个图像元素而不是一个，并将它们放置在彼此旁边。然后，您可以使用CSS动画将它们都向左移动一个图像的宽度，然后将它们的位置重置为右侧。这样，您将始终在屏幕上看到一个图像，而另一个可以随时替换它。
下面是一个示例，说明如何执行此操作：
第一个月

<div id="ticker-container">
  <a id="ticker-link" href="https://www.dummyLink.com">
    <img id="ticker-image-1" src="https://www.dummy.com" alt="logo">
    <img id="ticker-image-2" src="https://www.dummy.com" alt=" logo">
  </a>
</div>

字符串
CSS file :个

#ticker-container {
  width: 300px;
  height: 100px;
  overflow: hidden;
}
#ticker-link {
  display: flex;
  align-items: center;
}
#ticker-image-1,
#ticker-image-2 {
  width: 300px;
  height: auto;
  animation: ticker 5s linear infinite;
}
#ticker-image-2 {
  margin-left: -300px; /* Position the second image to the left of the first one */
}
@keyframes ticker {
  0% {
    transform: translateX(0); /* Start from the right */
  }
  100% {
    transform: translateX(-300px); /* Move to the left by the width of one image */
  }
}

型
Js file :个

const tickerLink = document.getElementById('ticker-link');
const tickerImage1 = document.getElementById('ticker-image-1');
const tickerImage2 = document.getElementById('ticker-image-2');
let isRotating = true;
tickerLink.addEventListener('click', function(e) {
  if (isRotating) {
    e.preventDefault(); // Prevent the link from navigating if it's rotating
  }
});
tickerLink.addEventListener('mouseover', function() {
  isRotating = false;
  tickerImage1.style.animationPlayState = 'paused';
  tickerImage2.style.animationPlayState = 'paused';
});
tickerLink.addEventListener('mouseout', function() {
  isRotating = true;
  tickerImage1.style.animationPlayState = 'running';
  tickerImage2.style.animationPlayState = 'running';
})

型
;

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

html 如何使一个无限的股票代码线只有一个图像？

3条答案

相关问题

热门标签

最新问答