首页 1 2 3 4 5 6 7

jquery滚动跑马灯效果

jQuery是一种流行的JavaScript库，可简化复杂的JavaScript编程任务。其中包括创建滚动跑马灯效果，让内容在页面上滚动。这个效果很常见，可以用于展示新闻标题、特价促销信息等。以下是一个简单的用jQuery实现滚动跑马灯效果的示例：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>滚动跑马灯效果</title>
    <style>
      #ticker {
        height: 20px;
        overflow: hidden;
      }
      #ticker ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
        left: 0;
        top: 0;
      }
      #ticker li {
        display: inline-block;
        margin-right: 20px;
        font-size: 18px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
        var tickerLength = $('#ticker li').length;
        var tickerWidth = tickerLength * 200;
        $('#ticker ul').css('width', tickerWidth + 'px');
        function ticker() {
          $('#ticker ul').animate({left: '-=200px'}, 400, function(){
            $('#ticker li:first').appendTo('#ticker ul');
            $('#ticker ul').css('left', '0px');
          });
        }
        setInterval(function(){ticker();}, 2000);
      });
    </script>
  </head>
  <body>
    <h1>滚动跑马灯效果</h1>
    <div id="ticker">
      <ul>
        <li>这是第一条信息</li>
        <li>这是第二条信息</li>
        <li>这是第三条信息</li>
        <li>这是第四条信息</li>
        <li>这是第五条信息</li>
      </ul>
    </div>
  </body>
</html>

jquery滚动跑马灯效果

上述代码中，我们使用了jQuery的一些方法，例如 animate() 和 appendTo()，以实现滚动效果。首先，jQuery会计算出整个跑马灯的长度（即 #ticker ul 元素的宽度），然后每隔2秒钟运行一次 ticker() 函数。每次滚动200像素，通过 appendTo() 将列表的第一个元素移到列表末尾，然后将 #ticker ul 元素的左侧位置重置为0，实现源源不断地滚动。