使用 JS 实现上下滚动走马灯

Posted Abeam

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 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.   运行效果

clip_image001[1]

 

Ø  总结

看代码其实并不难,但是当时我还真没看明白是如何实现滚动的。

其实是这样:

1.   首先加如一个div

2.   然后再追加一个div,此时开始滚动(第一个div慢慢从上面移除,第二个div就随着从下面浮现出来)。

3.   第三次进入,就不再追加div了,只是将第一个的内容(也就是innerHTML)改变成新的内容,然后再将这个div重新追加(其实是调换了位置(这点很重要))到下面,然后再次滚动就看到了新的内容的div了,最后就这样反复循环。

以上是关于使用 JS 实现上下滚动走马灯的主要内容,如果未能解决你的问题,请参考以下文章

jQuery中使用liMarquee无缝滚动走马灯

jquery跑马灯效果

网页中图片跑马灯上下滚动的效果怎样可以让他跑一下停一下再跑一下,代码怎么写?

请问跑马灯效果如何实现两行文字轮流从右向左跑? 一行跑完了,另一行再开始跑,这样循环

求Jquery或js一行文字跑马灯代码

flutter 跑马灯横向纵向滚动