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香草（无库）
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始终是最好的选择，但是根据您的要求，它需要在悬停时暂停并从上一个停止的位置恢复，这是CSS无法实现的。因此，要利用Javascript移动。设置一个timeInterval，它会更改元素的left属性，以将元素以间隔移动到左边，然后悬停清除timeinterval，以便动画将在最后一个左值处停止。 onmouseout再次开始将继续动画的间隔。

Answer 3

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 4

我认为CSS将是最好的选择。为了暂停并继续执行JavaScript保持工作。

Answer 5

如果有人正在寻找使用纯CSS并似乎无限显示屏幕文本的相同问题的答案，则可以将其签出here！

如何使用CSS或Javascript创建字幕

5 个答案: