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

Question

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

我正在为客户创建一个网站，我们决定在一个页面上使用选框来显示徽标，在另一个页面上使用选框来显示客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间，以使其看起来无限。我研究并尝试了 CSS 选项，并四处询问，结果发现通常建议使用 Javascript。我刚刚开始深入研究 Javascript，所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似：/sf/answers/3157252591/。这是我想要实现的目标的一个示例：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

这里有几种方法可以实现这一结果，您可以选择您最喜欢的一种。

\n\n

\n
• HTML 选取框标签
\n
• CSS 动画和文本缩进
\n
• CSS 动画和相对位置
\n
• JS vanilla（无库）
\n
• JS Jquery 动画
\n

\n\n

\r\n

\r\n

/* Vanilla JS */\r\n\r\nvar rightJS = {\r\n  init: function(){\r\n    rightJS.Tags = document.querySelectorAll(\'.rightJS\');\r\n    for(var i = 0; i < rightJS.Tags.length; i++){\r\n      rightJS.Tags[i].style.overflow = \'hidden\';\r\n    }\r\n    rightJS.Tags = document.querySelectorAll(\'.rightJS div\');\r\n    for(var i = 0; i < rightJS.Tags.length; i++){\r\n      rightJS.Tags[i].style.position = \'relative\';\r\n      rightJS.Tags[i].style.right = \'-\'+rightJS.Tags[i].parentElement.offsetWidth+\'px\';\r\n    }\r\n    rightJS.loop();\r\n  },\r\n  loop: function(){\r\n    for(var i = 0; i < rightJS.Tags.length; i++){\r\n      var x = parseFloat(rightJS.Tags[i].style.right);\r\n      x ++;\r\n      var W = rightJS.Tags[i].parentElement.offsetWidth;\r\n      var w = rightJS.Tags[i].offsetWidth;\r\n      if((x/100) * W  > w) x = -W;\r\n      if (rightJS.Tags[i].parentElement.parentElement.querySelector(\':hover\') !== rightJS.Tags[i].parentElement) rightJS.Tags[i].style.right = x + \'px\';\r\n    } \r\n    requestAnimationFrame(this.loop.bind(this));\r\n  }\r\n};\r\nwindow.addEventListener(\'load\',rightJS.init);\r\n\r\n/* JQUERY */\r\n\r\n$(function(){\r\n  var rightJQ = {\r\n    init: function(){\r\n      $(\'.rightJQ\').css({\r\n        overflow: \'hidden\'\r\n      });\r\n      $(\'.rightJQ\').on(\'mouseover\',function(){\r\n        $(\'div\', this).stop();\r\n      });\r\n      $(\'.rightJQ\').on(\'mouseout\',function(){\r\n        $(\'div\', this).animate({\r\n          right: \'100%\'\r\n        }, 14000, \'linear\' );\r\n      });\r\n      rightJQ.loop();\r\n    },\r\n    loop: function(){\r\n      $(\'.rightJQ div\').css({\r\n        position: \'relative\',\r\n        right: \'-100%\'\r\n      }).animate({\r\n        right: \'100%\'\r\n      }, 14000, \'linear\', rightJQ.loop);\r\n    }\r\n  };\r\n  rightJQ.init();\r\n});

\r\n

marquee { background: #0089fa; }\r\n\r\n.rightTI { background: #ff002b;\r\n  white-space: nowrap; \r\n  overflow: hidden;\r\n  animation: marquee 18s linear infinite;\r\n}\r\n.rightTI:hover {\r\n  animation-play-state: paused;\r\n}\r\n@-webkit-keyframes marquee {\r\n  0% {text-indent: 100%;}\r\n  100% {text-indent: -100%;}\r\n}\r\n\r\n.rightCSS { \r\n  background: #a35dc1;\r\n  overflow: hidden;\r\n} \r\n.rightCSS div {\r\n  position: relative;\r\n  animation: CSSright linear 18s infinite;\r\n} \r\n@keyframes CSSright {\r\n  0% { right: -100% }\r\n  100% { right: 100% }\r\n}\r\n.rightCSS:hover div {\r\n  animation-play-state: paused;\r\n}\r\n\r\n.rightJS { background: #ffa900; }\r\n\r\n.rightJQ { background: #00a753; }\r\n\r\n.li {\r\n  float: left;\r\n  width: 80%;\r\n  padding: 1%;\r\n  margin: 1% 10%;\r\n  height: 20px;\r\n  border-radius: 0.5em;\r\n  box-shadow: 0 0.1em 0.5em;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n