知识要点
1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。
2.用到的属性方法：
setInterval() //每隔一定时间执行一次函数，可以无限执行下去
clearInterval() //清除指定的setInterval
setTimeout() //经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置
clearTimeout() //清除指定的setTimeout
剩下的就是一些基础的dom操作
完整代码
注：因为看到了天猫积分的抽奖
【原生JS实现中奖信息无间隙滚动效果】
在网页设计中，动态的滚动效果能够增加用户交互体验，尤其在展示获奖信息时，无间隙滚动可以让用户更容易关注到最新的中奖情况。本教程将讲解如何使用原生JavaScript来实现这种效果。
### 1. 实现原理
中奖信息无间隙滚动的核心在于不断改变列表（`<ul>`）的`top`值。当一个元素的`top`值达到负值，表示它已经滚动出可视区域，此时，我们需要将列表复制一份并插入到原始列表下方，同时调整复制列表的`top`值使其与原始列表顶部对齐，这样就形成了一个连续的滚动效果。在滚动过程中，为了防止动画积存，需要适时地清除定时器。
### 2. 主要属性和方法
- `setInterval()`: 这个函数用于每隔一段时间重复执行一个函数。例如，我们可以通过不断更新列表的`top`值来实现持续滚动。例如：`setInterval(function() { /* 更新top值 */ }, 100);` 这里的100是毫秒，代表每100毫秒执行一次。
- `clearInterval()`: 当不再需要定时器时，使用此函数清除之前设置的`setInterval()`，以停止滚动。
- `setTimeout()`: 这个函数会在指定时间后执行一次函数。如果需要无限循环，通常需要在函数内部再次调用`setTimeout()`。例如：`setTimeout(function() { /* 执行动作 */ }, 1000);`
- `clearTimeout()`: 清除由`setTimeout()`设置的定时器，防止其执行。
### 3. 基础DOM操作
在实现滚动效果时，我们需要获取和操作HTML元素。主要涉及以下操作：
- `getElementById()`: 获取指定ID的元素。
- `getElementsByTagName()`: 获取所有指定标签名的元素。
- `appendChild()`: 将一个节点添加到另一个节点的子节点末尾。
- `cloneNode()`: 复制一个节点及其所有后代。
- `style.top`: 设置或返回元素的`top` CSS属性，决定元素相对于其容器的位置。
### 4. 示例代码
下面是一个简单的实现无间隙滚动的示例，包括HTML结构、CSS样式和JavaScript逻辑：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.title { background: #D20F25; width: 200px; height: 40px; color: #fff; line-height: 40px; }
#vip { background: #D20F25; width: 200px; height: 105px; color: #FF92AD; overflow: hidden; position: relative; }
#list { position: absolute; }
#vip li { height: 50px; line-height: 24px; font-size: 12px; margin-left: 30px; }
</style>
</head>
<body>
<div class="title"><p>会员中奖榜</p></div>
<div id="vip">
<ul id="list" style="top: 0;">
<li>m**b<br/>抽中18积分</li>
<!-- 其他中奖信息 -->
</ul>
</div>
<script>
var list = document.getElementById('list');
var listCopy = list.cloneNode(true);
listCopy.style.top = '100%';
document.getElementById('vip').appendChild(listCopy);
function scrollList() {
if (parseInt(list.style.top) + list.offsetHeight < 0) {
list.style.top = '0px';
listCopy.style.top = '100%';
} else {
list.style.top = parseInt(list.style.top) - 1 + 'px';
listCopy.style.top = parseInt(listCopy.style.top) - 1 + 'px';
}
}
var timer = setInterval(scrollList, 20); // 调整速度，20毫秒滚动一次
</script>
</body>
</html>
```
在这个示例中，我们首先获取了列表元素，然后复制了一份并将其添加到原始列表下方。`scrollList()`函数负责滚动逻辑，每次调用都会减少`top`值，当检测到元素即将滚出可视区域时，会将其重置到顶部。我们使用`setInterval()`定时执行`scrollList()`。
### 优化与注意事项
- 考虑性能：频繁的DOM操作可能会对性能造成影响，尤其是在大量数据的情况下。可以考虑使用requestAnimationFrame或者Web Workers来优化。
- 响应式设计：确保滚动效果在不同屏幕尺寸和设备上都能正常工作。
- 用户控制：提供暂停、恢复和切换滚动方向的选项，以提高用户体验。
以上就是使用原生JavaScript实现中奖信息无间隙滚动效果的详细步骤和相关知识点。实际应用中，还可以根据需求进行调整和扩展，比如添加缓动效果、支持多种滚动方向等。
