滚动的排行榜

前段时间项目有一个这样的需求，弄一个显示10条的滚动排行榜。

当时表格table不知道怎么滚，就用div+label实现的，效果出来了。

记录一下，数据就用js造了一下。

效果图如下：

横条图 tab_400x40.png

创建.html文件，引入jquery文件，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<style type="text/css">
*{
    margin:0;
    padding:0;
}

.header{
    height: 40px;
}

.header div {
    padding-top: 8px;
    float: left;
    width: 100px;
    text-align: center;
}

.header div label {
    font-size: 15px;
    color: #fff;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    initTab();
    setInterval(rollingTab, 100);    
});

function initTab(){
    var list = new Array();
    list.push(new rollingRank("张三","A","80"));
    list.push(new rollingRank("张三","B","90"));
    list.push(new rollingRank("张三","C","85"));
    list.push(new rollingRank("李四","A","90"));
    list.push(new rollingRank("李四","B","85"));
    list.push(new rollingRank("李四","C","95"));
    list.push(new rollingRank("王五","A","90"));
    list.push(new rollingRank("王五","B","70"));
    list.push(new rollingRank("王五","C","95"));
    list.push(new rollingRank("赵六","A","70"));
    list.push(new rollingRank("赵六","B","95"));
    //list.push(new rollingRank("赵六","C","70"));
    
    if(list.length > 0){
        //按学科ABC、成绩排名
        list.sort(function(a,b){
            if(a.course > b.course){
                return 1;
            }else if(a.course < b.course){
                return -1;
            }else{
                return b.score - a.score;
            }
        });    
        var tmp = '';
        var count = 1;
        var courseMap = {"A":"语文","B":"数学","C":"英语"};
        for(var p in list){
            tmp += ' <div class="header" ';    
            if(count %2 == 1){
                tmp += 'style="background: url(\'../images/tab_400x40.png\');"';    
            }    
            tmp +=    '">'
                    + '    <div>'
                    + '        <label>' + (count++) + '</label>'
                    + '    </div>'
                    + '    <div>'
                    + '        <label>' + list[p].name +'</label>'
                    + '    </div>'
                    + '    <div>'
                    + '        <label>' + courseMap[list[p].course] +'</label>'
                    + '    </div>'
                    + '    <div>'
                    + '        <label>' + list[p].score +'</label>'
                    + '    </div>'
                + ' </div>';
        }
        if(count > 11){
            if(count %2 == 0){
                tmp += '<div class="header"></div>';    
            }
        }
        $("#tab1").html(tmp);
    }
}

function rollingRank(name, course, score){
    this.name = name;
    this.course = course;
    this.score = score;
}

function rollingTab(){
    var tab = document.getElementById('tab');
    var tab1 = document.getElementById('tab1');
    if($("#tab1").children().length > 10){
        var tab2 = document.getElementById('tab2');
        tab2.innerHTML = tab1.innerHTML;
        if (tab.scrollTop >= tab1.offsetHeight){
            tab.scrollTop = 0;
        } else {
            tab.scrollTop++;
        }    
    }    
}
</script>
<title>rollingTable</title>
</head>
<body>
<div style="margin:150px 0 0 550px; width: 400px; background: #081832;">
    <div>
        <div class="header">
            <div><label style="color: #69ddf6;">序号</label></div>
            <div><label style="color: #69ddf6;">学生姓名</label></div>
            <div><label style="color: #69ddf6;">考试科目</label></div>
            <div><label style="color: #69ddf6;">考试成绩</label></div>
        </div>
    </div>
    <div id="tab" style="height: 400px; overflow: hidden;">
        <div id="tab1"></div>
        <div id="tab2"></div>
    </div>
</div>
</body>
</html>
View Code

 

posted @ 2019-07-11 17:56  李开心丶  阅读(908)  评论(0)  编辑  收藏  举报