jquery 无线滚动跑马灯 js实现跑马灯原理

转载

mob64ca13f8eecb 2023-12-26 17:01:45

文章标签 jquery 无线滚动跑马灯前端 ViewUI 上下滚动 css 文章分类 jQuery 前端开发

Ø 前言

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