使用 JS 实现文字左右跑马灯

Ø  前言

其实，前面两篇已经基本上实现了图片、文字跑马灯，这里为什么还要学下文字左右跑马灯呢？因为，虽然基本一样，但实现起来还是有很大不同的，所以为了完整再补充一下。代码如下：

1.   首先定义 css 样式

#div1 {

width: 500px;

height: 50px;

border: 1px solid black;

margin: 100px auto;

/*overflow: hidden;*/

position: relative;

}

.div {

width: 288px;

height: 30px;

line-height: 30px;

margin: auto;

position: absolute;

left: 0;

top: 0;

display: inline-block;

border: 1px solid blue;

}

2.   HTML 代码

<div id="div1">

<div class="div">我是一段文字，用于实现跑马灯功能~</div>

<div class="div">我也是一段文字，用于实现跑马灯功能~</div>

<!--<div class="div">我还是一段文字，用于实现跑马灯功能~</div>-->

</div>

3.   JS 代码

function $(str) { return (document.getElementById(str)); }

var div1;   //外层div元素

window.onload = function() {

init();

div1.start();

}

//设置当前滚动元素的 left、top 值

function move(x, y) {

this.style.left = x + 'px';

this.style.top = y + 'px';

}

//重置当前滚动元素

function reset() {

var p = this.parentNode;

this.move(p.offsetWidth, (p.offsetHeight - 2 - this.offsetHeight) / 2);

}

//初始化

function init() {

div1 = $("div1");

div1.currentIndex = 0;          //当前滚动元素索引

div1.loopItems = new Array();   //所有的滚动元素数组

div1.timer = null;              //计时器Id

div1.speed = 1;                 //速度值

div1.delay = 10;                //下一项延迟时间

div1.start = start;

div1.startLoop = startLoop;

div1.stopLoop = stopLoop;

div1.onmouseout = function() { this.startLoop(); }

div1.onmouseover = function() { this.stopLoop(); }

var divs = div1.getElementsByTagName("div");

//设置所有元素，并加入数组中

for(var i = 0; i < divs.length; i++) {

divs[i].index = i;

divs[i].move = move;

divs[i].reset = reset;

div1.loopItems.push(divs[i]);

}

}

//开始

function start() {

for(var i = 0; i < this.loopItems.length; i++) {

this.loopItems[i].reset();

}

this.startLoop();

}

//开始滚动

function startLoop() {

clearTimeout(this.timer);

if(this.currentIndex >= this.loopItems.length)

this.currentIndex = 0;

var div = this.loopItems[this.currentIndex];

//首先左移

if(div.offsetLeft > 0 - div.offsetWidth) {

div.move(div.offsetLeft - this.speed, div.offsetTop);

} else if(div.offsetTop > 0 - div.offsetHeight) {   //再上移

div.move(div.offsetLeft, div.offsetTop - this.speed);

} else {  //最后重置元素

div.reset();

this.currentIndex++;

}

this.timer = setTimeout('$("' + this.id + '").startLoop();', this.delay);

}

//停止滚动

function stopLoop() {

clearTimeout(this.timer);

}

4.   运行效果

Ø  知识点梳理

1.   首先定义了 $ 的全局函数，用于根据指定的元素 id 获取元素，是不是有点类似 jQuery ? 哈哈，不要被骗了，只支持 id 查找。

2.   因为元素是使用的 position: absolute;（绝对定位），所以可以使用 element.style.left = xx.px 来定位元素。

3.   无论是外层 div 或内部的移动 div 元素，都使用了将属性或方法直接赋值到元素的属性之上，这样在方法内部就可以直接使用 this 关键字访问到元素。

4.   使用 currentIndex 记录当前移动元素的索引，以及 loopItems 属性用于存储所有移动元素的数组，这样是一个比较合理的设计，视乎有点面向对象的感觉？

5.   在以上示例中，主要根据元素的 offsetLeft、offsetTop、offsetWidth、offsetHeight 等属性来定位移动元素的 left 和 top。