<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery排名文字无缝循环向上滚动代码</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/table.css" type="text/css" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<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>
</body>
</html>
jQuery排名文字无缝循环向上滚动代码.zip
版权申诉
43 浏览量
2023-09-22
00:14:33
上传
评论
收藏 57KB ZIP 举报
jQuery排名文字无缝循环向上滚动代码.zip （6个子文件） 
js 
jquery.min.js 91KB css bootstrap.css 138KB table.css 1KB
index.html 3KB images 
portrait_default.png 626B cup.png 1KB资源评论
