如何使用 CSS 或 Javascript 创建选取框

Question

我需要创建两个选取框（一个带有重复图像，一个带有重复链接），以任意大小跨越浏览器窗口；选取框项目需要从一开始就显示出来，而不需要几秒钟的时间才能出现在屏幕上，并且它们中的每一个都需要相隔大约 20px/30px。当用户将鼠标悬停在它上面时，选取框需要停止在页面上移动。

我正在为客户创建一个网站，我们决定在一个页面上设置一个选框来显示徽标，在另一个页面上设置一个选框来显示客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间以使其看起来无限。我研究并尝试了 CSS 选项，我四处询问后发现通常推荐使用 Javascript。我刚刚开始研究 Javascript，所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似：https://stackoverflow.com/a/45103608/11623961。这是我想要实现的一个示例：http://maxsiedentopf.com/work-2（只有底部的那个，但左侧没有重叠；只是从左向右移动）。这是我试图用来达到预期效果的方法：https://codepen.io/jamesbarnett/pen/kfmKa。

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 100%;

  overflow: hidden;
  position: relative;
  background-color: #e9e5fb;  
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0 4px 0;
}

.marquee div {
  display: inline-block;
  width: 300%;
  height: 40px;

  position: absolute;
  overflow: hidden;

  animation: marquee 12s linear infinite;
}

.marquee span {
  float: left;
  width: 25%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -150%; }
}

        <div class="marquee">
            <div>
                <span><a href="#">twitter</a></span>
                <span><a href="#">instagram</a></span> 
                <span><a href="#">pinterest</a></span>
                <span><a href="#">spotify</a></span> 
                <span><a href="#">magazine</a></span>
            </div>
        </div>

显然，我尝试做的事情有很多问题。选框没有出现无限，我还没有弄清楚如何在悬停时暂停，项目相距太远。任何帮助将不胜感激。谢谢！

Answer 1

这里有几种方法可以达到效果，你可以选择你最喜欢的。

• HTML 字幕标签
• CSS 动画和文本缩进
• CSS 动画和相对位置
• JS vanilla（无库）
• JS Jquery 动画

/* Vanilla JS */

var rightJS = {
  init: function(){
    rightJS.Tags = document.querySelectorAll('.rightJS');
    for(var i = 0; i < rightJS.Tags.length; i++){
      rightJS.Tags[i].style.overflow = 'hidden';
    }
    rightJS.Tags = document.querySelectorAll('.rightJS div');
    for(var i = 0; i < rightJS.Tags.length; i++){
      rightJS.Tags[i].style.position = 'relative';
      rightJS.Tags[i].style.right = '-'+rightJS.Tags[i].parentElement.offsetWidth+'px';
    }
    rightJS.loop();
  },
  loop: function(){
    for(var i = 0; i < rightJS.Tags.length; i++){
      var x = parseFloat(rightJS.Tags[i].style.right);
      x ++;
      var W = rightJS.Tags[i].parentElement.offsetWidth;
      var w = rightJS.Tags[i].offsetWidth;
      if((x/100) * W  > w) x = -W;
      if (rightJS.Tags[i].parentElement.parentElement.querySelector(':hover') !== rightJS.Tags[i].parentElement) rightJS.Tags[i].style.right = x + 'px';
    } 
    requestAnimationFrame(this.loop.bind(this));
  }
};
window.addEventListener('load',rightJS.init);

/* JQUERY */

$(function(){
  var rightJQ = {
    init: function(){
      $('.rightJQ').css({
        overflow: 'hidden'
      });
      $('.rightJQ').on('mouseover',function(){
        $('div', this).stop();
      });
      $('.rightJQ').on('mouseout',function(){
        $('div', this).animate({
          right: '100%'
        }, 14000, 'linear' );
      });
      rightJQ.loop();
    },
    loop: function(){
      $('.rightJQ div').css({
        position: 'relative',
        right: '-100%'
      }).animate({
        right: '100%'
      }, 14000, 'linear', rightJQ.loop);
    }
  };
  rightJQ.init();
});

marquee { background: #0089fa; }

.rightTI { background: #ff002b;
  white-space: nowrap; 
  overflow: hidden;
  animation: marquee 18s linear infinite;
}
.rightTI:hover {
  animation-play-state: paused;
}
@-webkit-keyframes marquee {
  0% {text-indent: 100%;}
  100% {text-indent: -100%;}
}

.rightCSS { 
  background: #a35dc1;
  overflow: hidden;
} 
.rightCSS div {
  position: relative;
  animation: CSSright linear 18s infinite;
} 
@keyframes CSSright {
  0% { right: -100% }
  100% { right: 100% }
}
.rightCSS:hover div {
  animation-play-state: paused;
}

.rightJS { background: #ffa900; }

.rightJQ { background: #00a753; }

.li {
  float: left;
  width: 80%;
  padding: 1%;
  margin: 1% 10%;
  height: 20px;
  border-radius: 0.5em;
  box-shadow: 0 0.1em 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<marquee class="li" direction=”right” onmouseover="stop()" onmouseout="start()">★ HTML tag &lt;marquee&gt; ★</marquee>
<div class="rightTI li">★ CSS animation and text-indent ★</div>
<div class="rightCSS li"><div>★ CSS animation and position relative ★</div></div>
<div class="rightJS li"><div>★ pure javascript ★</div></div>
<div class="rightJQ li"><div>★ Jquery animate ★</div></div>

Answer 2

如果有人正在寻找使用纯 CSS 并且似乎在屏幕上无限显示文本的同一问题的答案，您可以查看 here！

Answer 3

使用 CSS 始终是最佳选择，但根据您的要求，它需要在悬停时暂停并从上次停止的位置恢复，这是使用 CSS 无法实现的。 因此，请使用 Javascript 进行移动。设置一个 timeInterval ，它改变元素的 left 属性以将元素按间隔向左移动，并且 onhover 清除 timeinterval 以便动画将在最后一个左侧值处停止。 onmouseout 再次启动将继续动画的间隔。

Answer 4

lucygoosey 你的问题已经解决了，如果你想要更多，你应该付出更多的努力

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 300%;
  position: relative;
  padding: 8px 0 4px 0;
  border: none;
}

.marq{
  background-color: #e9e5fb;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  
}


.marquee span {
  float: left;
  width: 300px;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -150%; }
}

<div class="marq">  
<marquee onmouseover="this.stop();" onmouseout="this.start();">
           <div class="marquee">
                <span><a href="#">twitter</a></span>
                <span><a href="#">instagram</a></span> 
                <span><a href="#">pinterest</a></span>
                <span><a href="#">spotify</a></span> 
                <span><a href="#">magazine</a></span>
          </div>
 </marquee>     
</div>

阅读更多关于选取框标签的信息

Marquee tag documentation - here

Answer 5

我认为 CSS 将是最好的选择..对于暂停和继续 JavaScript 应该做的工作..