Ø 前言
今天在做商城首页时，遇到一个上下跑马灯功能，因为之前也只是接触过左右的跑马灯，一时还不知道从何下手。在网上看了几个 demo，并亲自运行了一下，是可以实现的。但是，能运行不知其所以然也不行，所以还需要自己编码去真正的理解，下面是我的示例。
1. 首先定义 css 样式
#div1{
width: 180px;
margin: auto;
border: 1px solid blue;
overflow: hidden; /*必须设置该属性*/
}
.child{
width: 100%;
height: 100%;
text-align: center;
line-height: 30px;
}
2. Js 代码
var div1; //外层div
var height = 30; //外层div高度
var rollIndex = 0; //当前滚动的索引
var millisec = 2000; //滚动间隔时间（毫秒）
var intervalIds = new Array(); //计时器 id 数组
var datas = ["上下滚动跑马灯1", "上下滚动跑马灯2", "上下滚动跑马灯3"];
window.onload = function() {
div1 = document.getElementById("div1");
div1.style.height = height + "px";
//鼠标进入停止滚动
div1.onmouseover = function() {
clearInterval(intervalIds[0]);
}
//鼠标离开开始滚动
div1.onmouseout = function() {
intervalIds[0] = setInterval("addItem()", millisec);
}
addItem(); //首先加载第一项
intervalIds[0] = setInterval("addItem()", millisec);
}
//添加滚动项
function addItem(){
var content = datas[rollIndex];
console.log("滚动item: " + rollIndex)
if(div1.childNodes.length <= 1) {
var div = document.createElement("div");
div.setAttribute("class", "child");
div.innerHTML = content;
div1.appendChild(div);
//设置两个 div 的背景色
if(rollIndex % 2 == 0)
div.style.background = "#EEE9E9";
else
div.style.background = "#F0FFF0";
}
else {
div1.childNodes[0].innerHTML = content;
div1.appendChild(div1.childNodes[0]);
div1.scrollTop = 0; //兼容Firefox
}
rollIndex++;
rollIndex = rollIndex < datas.length ? rollIndex : 0;
if(div1.childNodes.length > 1) {
clearInterval(intervalIds[1]);
intervalIds[1] = setInterval("setScroll()", 20);
}
}
//设置外层div.scrollTop
function setScroll(){
div1.scrollTop++;
if(div1.scrollTop >= height) {
clearInterval(intervalIds[1]);
console.log("stop");
}
}
3. Html 代码
<div id="div1"></div>
4. 运行效果
Ø 总结
看代码其实并不难，但是当时我还真没看明白是如何实现滚动的。
其实是这样：
1. 首先加如一个div。
2. 然后再追加一个div，此时开始滚动（第一个div慢慢从上面移除，第二个div就随着从下面浮现出来）。
3. 第三次进入，就不再追加div了，只是将第一个的内容（也就是innerHTML）改变成新的内容，然后再将这个div重新追加（其实是调换了位置（这点很重要））到下面，然后再次滚动就看到了新的内容的div了，最后就这样反复循环。