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



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

32 126 43



特效描述:排名文字滚动。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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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