如何使文本在具有2个变量的按钮脚本上水平滚动？

如何解决如何使文本在具有2个变量的按钮脚本上水平滚动？

向我们的公司提供了一个按钮的代码段，可放在我们的网站上以连接到我们的虚拟摊位。我希望两组文本都可以根据展位状态在页面上水平滚动（从左到右）。有人可以帮帮我吗？这是代码：

<script src="https://www.websitehere"></script>
<div class="btn-booth-container" 
style="cursor: pointer; 
color: #F7F6F2; 
background-color: #507C8F;
padding: 10px;
text-align: center;
font-weight: bold;"

onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')" 
data-boothid="XXXX" 

data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH" 

data-boothoff="SCHEDULE A VIRTUAL MEETING" 

id="div_booth_status"></div>
<script>updateBoothStatus();
</script>

总结一下-我希望data-boothon文本和data-boothoff文本在页面上水平滚动。这就是我可以访问的所有代码。

谢谢！

解决方法

我不知道您如何跟踪引导状态，因此我将仅使用:hover在两者之间进行切换。

因为您将文本用作数据属性，所以我可以通过伪元素（之前和之后）显示这些文本。我添加了position: absolute，left: 0px和right: 0px，以使它们占据position: relative父级的宽度。

我最终为两个伪选择器创建了一个进行中的动画，该动画将-100％（从左侧反弹）转换为100％（从右侧反弹）。

.btn-booth-container {
  --booth-container-height: 20px;
  
  cursor: pointer; 
  color: #F7F6F2; 
  background-color: #507C8F;
  height: var(--booth-container-height);
  text-align: center;
  font-weight: bold;
  
  /* ADDED */
  position: relative;
  overflow: hidden;
}

.btn-booth-container::before,.btn-booth-container::after {
  position: absolute;
  display: inline-block;
  right: 0px;
  left: 0px;
  top: calc(var(--booth-container-height) / 8);
  
  animation: my-move 10s linear infinite;
  text-align: right;
}

.btn-booth-container::before {
  content: attr(data-boothon);
  opacity: 1;
}

.btn-booth-container:hover::before {
  opacity: 0;
}

.btn-booth-container::after {
  opacity: 0;
  content: attr(data-boothoff);
}

.btn-booth-container:hover::after {
  opacity: 1;
}

@keyframes my-move {
  from  {transform: translateX(-100%)}
  to    {transform: translateX(100%);}
}

<div class="btn-booth-container" 
      onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')" 
      data-boothid="XXXX" 
      data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH" 
      data-boothoff="SCHEDULE A VIRTUAL MEETING" 
      id="div_booth_status"></div>

说实话，我不是100％肯定会理解这个问题。这是我了解您想要实现的目标

<!-- <script src="https://www.websitehere"></script> this line is commented for the demo only -->

<!-- It is not a good practice to add <style> tag inside the <body> but but it should work. It looks like you have no choice…  -->
<style>
  @keyframes scroll {
    0% {right: 100%}
    100% {right: 0}
  }
</style>
<div
  class="btn-booth-container"
  style="cursor: pointer; 
    color: #F7F6F2; 
    background-color: #507C8F;
    padding: 10px;
    height: 1em;
    text-align: center;
    font-weight: bold;
    position: relative;"
  onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')">
  <div
    style="position: absolute;
      animation: scroll 4s linear infinite"
    data-boothid="XXXX"
    data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH"
    data-boothoff="SCHEDULE A VIRTUAL MEETING"
    id="div_booth_status">DEMO</div>
</div>

<!-- <script>updateBoothStatus();</script> this line is commented for the demo only -->

在复制/粘贴代码之前，删除“ DEMO”一词，这对演示来说很不错。

animation: scroll 4s linear infinite，您可以在此处更改animation

如何使文本在具有2个变量的按钮脚本上水平滚动？

如何解决如何使文本在具有2个变量的按钮脚本上水平滚动？

解决方法

相关推荐