75 lines
2.7 KiB
JavaScript
75 lines
2.7 KiB
JavaScript
// 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
|
||
//tableScroll('tableId', 400, 30, 10)
|
||
|
||
function tableScroll(tableid, hei, speed, len) {
|
||
var MyMarhq;
|
||
|
||
clearTimeout(MyMarhq);
|
||
$('#' + tableid).parent().find('.tableid_').remove()
|
||
$('#' + tableid).parent().prepend(
|
||
'<table class="tableid_"><thead style="display:none">' + $('#' + tableid + ' thead').html() + '</thead></table>'
|
||
).css({
|
||
'position': 'relative',
|
||
'overflow': 'hidden',
|
||
'height': hei + 'px'
|
||
})
|
||
$(".tableid_").find('th').each(function(i) {
|
||
$(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
|
||
});
|
||
$(".tableid_").css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 9
|
||
})
|
||
$('#' + tableid).css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 1
|
||
})
|
||
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
$('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
|
||
$(".tableid_").css('top', 0);
|
||
$('#' + tableid).css('top', 0);
|
||
var tblTop = 0;
|
||
var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
|
||
var trHeight = $('#' + tableid).find('tbody').find("tr").height();
|
||
|
||
function Marqueehq() {
|
||
tblTop = tblTop - 1;
|
||
if (tblTop == -outerHeight) {
|
||
//第一项放到最后一项
|
||
var td_fir = $('#' + tableid).find("tbody").find("tr:first-child");
|
||
var td_new = "<tr style='height:"+trHeight+"px;'>" + td_fir.html() +
|
||
"</tr>";
|
||
$('#' + tableid).find("tbody").append(td_new);
|
||
td_fir.remove();
|
||
tblTop = 0;
|
||
}
|
||
// if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
|
||
// tblTop = 0;
|
||
// } else {
|
||
// tblTop -= 1;
|
||
// }
|
||
$('#' + tableid).css('transform', 'translateY(' + tblTop + 'px)');
|
||
// $('#' + tableid).css('margin-top', tblTop + 'px');
|
||
clearTimeout(MyMarhq);
|
||
MyMarhq = setTimeout(function() {
|
||
Marqueehq()
|
||
}, speed);
|
||
}
|
||
// setInterval(Marqueehq,speed);
|
||
MyMarhq = setTimeout(Marqueehq, speed);
|
||
$('#' + tableid).find('tbody').hover(function() {
|
||
clearTimeout(MyMarhq);
|
||
}, function() {
|
||
clearTimeout(MyMarhq);
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
MyMarhq = setTimeout(Marqueehq, speed);
|
||
}
|
||
})
|
||
}
|
||
|
||
} |