jquery滚动排名效果

代码语言:html

所属分类:布局界面

代码描述:jquery滚动排名效果

代码标签: 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js轮播列表</title>
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
    
.lunbo_div {
    width: 250px;
    height: 365px;
    background-color: #db3b3a;
    position: fixed;
    border-radius: 10px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.cup {
    width: 70px;
    height: auto;
    margin-top: -17px;
    margin-left: 20px;
}

.span_bm {
            /*display: grid;*/
            float: right;
        }

        .today_title {
            display: inline-block;
            color: white;
            font-size: 14px;
            margin-right: 20px;
            margin-top: 10px;
        }

.totady_pers {
    font-size: 30px;
    color: white;
    font-weight: 600;
}

.bm_content {
    width: 240px;
    height: 295px;
    background-color: white;
    margin: 0px 5px 0 5px;
    border-radius: 3px;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    top: -5px;
}

table {
    table-layout: fixed;
    font-size: 12px;
}

thead {
    font-size: 12px;
}

.table > thead > tr > th {
    border-bottom: 1px solid #eeeeee;
    text-align: center;
}

.table > tbody + tbody {
    border-top: 0px;
}

.table img {
    width: 15px;
    border-radius: 50%;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table {
    table-layout: fixed;
}

.center {
    vertical-align: middle;
}
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="lunbo_div">
<div>
<img class="cup" src="http://repo.bfw.wiki/bfwrepo/icon/5e952686a92ec.png" />
<span class="span_bm">
<span class="today_title">今日总报名数</span>
<br />
<span class="totady_pers">100</span>
</span>
</div>
<div id="bm_content" class="bm_content">
<table class="table table-condensed ">
<thead style="position: fixed; background-color: #eeeeee; ">
<tr>
<th style=" width: 60px; text-align: right;">用户</th>
<th style="width: 110px; text-align: center;">购买产品</th>
<th style=" width: 69px; padding-right: 30px;">时间</th>.........完整代码请登录后点击上方下载按钮下载查看

网友评论0