使用 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。