使用JavaScript实现全屏跑马灯效果-优快云博客

本文详细介绍了如何利用JavaScript编程实现全屏跑马灯效果，包括关键代码示例和实现步骤，适合初学者和进阶者学习。通过调整CSS样式和JavaScript逻辑，可以创建出动态滚动的文字或图片展示，提升网页互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 50px;
      height: 50px;
      background: skyblue;
      position: fixed;
      left: 0;
      top: 0;
      border-radius: 50%;
      background: -webkit-radial-gradient(#f00, #00f) !important;
    }
  </style>

<body>
  <div class="box"></div>
</body>
<script>
  //第一种方法
  var oBox = document.querySelector('.box');
  maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
  maxTop = document.documentElement.clientHeight - oBox.offsetHeight;

  function fn() {
    animate(oBox, 500, maxLeft, 'left', function () {
      animate(oBox, 500, maxTop, 'top', function () {
        animate(oBox, 500, 0, 'left', function () {
          animate(oBox, 500, 0, 'top', function () {
            fn();
          })
        });
      })
    });
  }
  fn();
function animate(ele, time, direction, property, callback) {
  var current = parseInt(getComputedStyle(ele)[property]);
  var gap = direction - current;
  var speed = gap / time;
  var timer = setInterval(function () {
    var value = parseInt(getComputedStyle(ele)[property]);
    value += speed;
    if (value * gap >= direction * gap) {
      clearInterval(timer);
      value = direction;
      callback && callback(); //  if(callback) callback()
    }
    ele.style[property] = value + 'px';
  }, 1)
}

  
  //第二种方法
  function run(ele, speed = 10) {
    var speed = 10;

    var speedX = speed;
    var speedY = 0;

    setInterval(function () {

      maxLeft = document.documentElement.clientWidth - ele.offsetWidth;
      maxTop = document.documentElement.clientHeight - ele.offsetHeight;

      var left = ele.offsetLeft;
      var top = ele.offsetTop;


      left += speedX;
      top += speedY;

      if (left > maxLeft) {
        left = maxLeft;
        speedX = 0;
        speedY = speed;
      }

      if (top > maxTop) {
        top = maxTop;
        speedY = 0;
        speedX = -speed;
      }

      if (left < 0) {
        left = 0;
        speedX = 0;
        speedY = -speed;
      }

      if (top < 0) {
        top = 0;
        speedY = 0;
        speedX = speed;
      }


      ele.style.left = left + 'px';
      ele.style.top = top + 'px';

    }, 10);
  }

  function randomRGB() {
    return `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`
  }

</script>