jq——realize barrage scrolling (scroll left + scroll right)——basic accumulation

Recently, a colleague is writing a barrage function. The following code is recorded below:

1.html code

<div id="scrollContainer"></div>

2.Introductionjq

<script src="./script/jquery-1.8.3.js" type="text/javascript"></script>

3.jq code-scroll left

<script>
      function getRandomName() {
    
    
        const names = [
          '王',
          '熊',
          '张',
          '郑',
          '刘',
          '李',
          '秦',
          '付',
          '肖',
          '宋',
          '陈',
          '杨',
          '黄',
          '周',
          '吴',
          '赵',
          '孙',
          '钱',
          '朱',
          '杜',
          '董',
          '程',
          '曹',
          '田',
          '谢',
          '韩',
          '杜',
          '叶',
          '吕',
          '丁',
        ];
        const randomName = names[Math.floor(Math.random() * names.length)];
        const gender = Math.random() < 0.5 ? '先生' : '女士';
        return randomName + gender + '已领取';
      }

      function createFloatingBox() {
    
    
        const box = document.createElement('div');
        box.className = 'floatingBox';
        box.textContent = getRandomName();
        return box;
      }

      function startAnimation() {
    
    
        const container = document.getElementById('scrollContainer');

        function animate() {
    
    
          for (let i = 0; i < 3; i++) {
    
    
            const box = createFloatingBox();
            const duration = 6000; // 4 seconds
            const endPosition = container.offsetWidth + 50;
            const startPosition = -box.offsetWidth - 50;
            const speed = (startPosition - endPosition) / duration;

            let startTime = null;

            function step(timestamp) {
    
    
              if (!startTime) startTime = timestamp;

              const progress = timestamp - startTime;
              const distance = speed * progress;

              if (progress < duration) {
    
    
                box.style.right = startPosition - distance + 'px';
                requestAnimationFrame(step);
              } else {
    
    
                container.removeChild(box);
              }
            }

            box.style.right = startPosition + 'px';

            if (i === 0) {
    
    
              box.classList.add('line1');
            } else if (i === 1) {
    
    
              box.classList.add('line2');
            } else {
    
    
              box.classList.add('line3');
            }

            container.appendChild(box);
            requestAnimationFrame(step);
          }
        }

        // Start the animation every 1 second
        setInterval(animate, 1500);
      }

      // Start the animation
      startAnimation();
    </script>

4.jq code-scroll right

 <script>
      function getRandomName() {
    
    
        const names = [
          '王',
          '熊',
          '张',
          '郑',
          '刘',
          '李',
          '秦',
          '付',
          '肖',
          '宋',
          '陈',
          '杨',
          '黄',
          '周',
          '吴',
          '赵',
          '孙',
          '钱',
          '朱',
          '杜',
          '董',
          '程',
          '曹',
          '田',
          '谢',
          '韩',
          '杜',
          '叶',
          '吕',
          '丁',
        ];
        const randomName = names[Math.floor(Math.random() * names.length)];
        const gender = Math.random() < 0.5 ? '先生' : '女士';
        return randomName + gender + '已领取';
      }

      function createFloatingBox() {
    
    
        const box = document.createElement('div');
        box.className = 'floatingBox';
        box.textContent = getRandomName();
        return box;
      }

      function startAnimation() {
    
    
        const container = document.getElementById('scrollContainer');

        function animate() {
    
    
          for (let i = 0; i < 3; i++) {
    
    
            const box = createFloatingBox();
            const duration = 6000; // 4 seconds
            const startPosition = container.offsetWidth + 50;
            const endPosition = -box.offsetWidth - 50;
            const speed = (endPosition - startPosition) / duration;

            let startTime = null;

            function step(timestamp) {
    
    
              if (!startTime) startTime = timestamp;

              const progress = timestamp - startTime;
              const distance = speed * progress;

              if (progress < duration) {
    
    
                box.style.right = startPosition + distance + 'px';
                requestAnimationFrame(step);
              } else {
    
    
                container.removeChild(box);
              }
            }

            box.style.right = startPosition + 'px';

            if (i === 0) {
    
    
              box.classList.add('line1');
            } else if (i === 1) {
    
    
              box.classList.add('line2');
            } else {
    
    
              box.classList.add('line3');
            }

            container.appendChild(box);
            requestAnimationFrame(step);
          }
        }

        // Start the animation every 1 second
        setInterval(animate, 1500);
      }

      // Start the animation
      startAnimation();
    </script>