使用 JS 实现文字上下跑马灯

Ø  前言

今天在做商城首页时，遇到一个上下跑马灯功能，因为之前也只是接触过左右的跑马灯，一时还不知道从何下手。在网上看了几个 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了，最后就这样反复循环。