jquery 信息无缝滚动

jQuery信息无缝滚动是一种非常实用的技术，可以让网页中的信息在一定的区域内无限循环滚动展示。这种效果非常适合用于新闻资讯、广告宣传等场景。

<div class="news">
  <ul>
    <li>这是第一条新闻</li>
    <li>这是第二条新闻</li>
    <li>这是第三条新闻</li>
    <li>这是第四条新闻</li>
    <li>这是第五条新闻</li>
    <li>这是第六条新闻</li>
  </ul>
</div>

上面是一个基本的HTML结构，我们需要对其添加CSS样式和JavaScript脚本来实现无缝滚动的效果。

.news {
  height: 50px; /*设置垂直方向上的高度*/
  overflow: hidden; /*隐藏溢出部分*/
}
.news ul li {
  line-height: 50px; /*设置每一行的高度*/
  margin-bottom: 10px; /*设置每条信息之间的间距*/
}
.news ul {
  animation: move 10s infinite; /*触发动画效果*/
}

@keyframes move {
  0% {
    top: 0; /*从0开始*/
  }
  100% {
    top: -110px; /*负值，向上移动*/
  }
}

上面是CSS样式，其中利用了CSS3中的@keyframes关键字来实现动画效果。下面是JavaScript代码：

$('ul').append($('ul li').clone(true)); /*克隆列表*/
var timer = setInterval(move, 3000); /*启动定时器*/

function move() {
  var height = $('ul li').height() + 10; /*计算移动距离*/
  $('ul').animate({'marginTop': -height + 'px'}, 500, function() {
    $('ul li').eq(0).appendTo($('ul')); /*添加到列表末尾*/
    $('ul').css('marginTop', '0'); /*重置marginTop值*/
  });
}

以上代码中，我们首先克隆了一份新闻列表，然后启动了一个定时器，每隔一段时间就执行一次move()函数。

在move()函数中，我们先计算出每条新闻需要移动的距离，然后通过jQuery的animate()方法来实现动画效果。在动画结束后，我们将列表中的第一条新闻添加到末尾，同时重置marginTop值，然后就可以开始下一轮动画了。

通过以上的代码，我们就可以实现一个简单的jQuery信息无缝滚动效果了。