javascript 类似弹幕的跑马灯 js文字跑马灯效果展示

转载

智能开发先锋 2023-09-04 23:52:27

文章标签 javascript 类似弹幕的跑马灯 javascript ViewUI 数组重置 文章分类 JavaScript 前端开发

Ø 前言

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

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. 运行效果