jQuery排名窗口文字滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

23 89 30



特效描述:排名窗口 文字滚动。jQuery文字向上滚动,制作竞赛排名参加用户文字滚动代码。适用于抽奖显示中奖人信息,文字上下滚动展示代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/table.css" type="text/css" />

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

    <div class="lunbo_div">
        <div>
            <img class="cup" src="./images/cup.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>
                    </tr>
                </thead>
                <tbody id="tb1"></tbody>
                <tbody id="tb2"></tbody>
            </table>
        </div>
    </div>
<script>
    ; (function ($) {
        var box = document.getElementById("bm_content");
        var l1 = document.getElementById("tb1");
        var l2 = document.getElementById("tb2");
        autoScroll();
        function autoScroll() {
            var product = RenderList();
            l1.innerHTML = product;
            if (l1.offsetHeight > box.offsetHeight) {
                l2.innerHTML = l1.innerHTML;//克隆list1的数据,使得list2和list1的数据一样
                scrollMove = setInterval(scrollup, 30);//数值越大,滚动速度越慢
                box.onmouseover = function () {
                    clearInterval(scrollMove)
                }
            }
        }
        function scrollup() {
            //滚动条距离顶部的值恰好等于list1的高度时,达到滚动临界点,此时将让scrollTop=0,让list1回到初始位置,实现无缝滚动
            if (box.scrollTop >= l1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop++;
            }
        }
        //鼠标离开时,滚动继续
        box.onmouseout = function () {
            scrollMove = setInterval(scrollup, 30);
        }
        function RenderList() {
            var str = '';
            for (var i = 0; i < 20; i++) {
                var a = i + 1;
                str += '<tr>';
                str += '<td class="ellipsis">';
                str += '<img src="./images/portrait_default.png"/>';
                str += '<span class="center" title="张三' + a + '" style="margin-left: 10px;">张三' + a + '</span>';
                str += '</td>';
                str += '<td class="ellipsis" title="' + a + '年级上海教育版同步课">' + a + '年级上海教育版同步课</td>';
                str += '<td class="ellipsis" title="16点46分">16点46分</td>';
                str += ' </tr>';
            }
            return str;
        }
    })(jQuery)
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到