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

Question

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

我正在为一个客户创建一个网站，我们决定在一个页面上用选取框显示徽标，在另一个页面上用选取框显示指向客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间，以使其看起来无限。我研究并尝试了 CSS 选项，我四处询问才发现通常建议使用 Javascript。我刚刚开始研究 Javascript，所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似：. This is an example of what I'm trying to achieve: http://maxsiedentopf.com/work-2 (only the one at the bottom, but with no overlap from the left side; simply moving from left to right). This is what I was trying to use to achieve the desired effect: 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

使用CSS始终是最佳选择，但根据您的要求，它需要在悬停时暂停并从上次停止的位置恢复，使用CSS是不可能的。所以利用 Javascript 来移动。设置一个 timeInterval，它改变元素的左属性以间隔将元素向左移动，并在悬停时清除时间间隔，以便动画将停止在最后一个 left 值。 onmouseout 再次启动将继续动画的间隔。

Answer 2

lucygoosey ur problem is solve and if you want more than u should give more effort on that

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>

Read more about marquee tag

Marquee tag documentation - here

Answer 3

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

HTML 选取框标签
CSS动画和text-indent
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 4

我认为 CSS 将是最好的选择..暂停并继续 JavaScript shold 完成工作..

Answer 5

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

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

How to create a marquee using CSS or Javascript

javascript

css

marquee