基于jQuery实现table无缝滚动

本篇笔记基于网友的分享基于jQuery实现table无缝滚动，具体效果如下所示：

基于jQuery实现table无缝滚动

原网址：https://www.jq22.com/webqd4722

下面内容是波波改动部分，主要解决了在一个页面中存在多个table滚动时的调用和样式冲突的问题。改动不大，仅供参考。

  1. //参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
  2. function tableScroll(tableid, hei, speed, len) {
  3.     var MyMarhq = '';
  4.     clearTimeout(MyMarhq);
  5.     $('#' + tableid).parent().find('.tableid_').remove();
  6.     $('#' + tableid).parent().prepend(
  7.         '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
  8.     ).css({
  9.         /*'position': 'relative',*/
  10.         'overflow': 'hidden',
  11.         'height': hei + 'px'
  12.     })
  14.     /*
  15.     $(".tableid_").find('th').each(function(i) {
  16.         $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
  17.     });
  18.     */
  19.     //解决多个列表时样式冲突
  20.     $('#' + tableid).siblings(".tableid_").find('th').each(function (i) {
  21.         $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
  22.     })
  24.     $(".tableid_").css({
  25.         'position': 'absolute',
  26.         'top': 0,
  27.         'left': 0,
  28.         'z-index': 9
  29.     })
  30.     $('#' + tableid).css({
  31.         'position': 'absolute',
  32.         'top': 0,
  33.         'left': 0,
  34.         'z-index': 1
  35.     })
  37.     if ($('#' + tableid).find('tbody tr').length > len) {
  38.         $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  39.         $(".tableid_").css('top', 0);
  40.         $('#' + tableid).css('top', 0);
  41.         var tblTop = 0;
  42.         var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
  44.         function Marqueehq() {
  45.             if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
  46.                 tblTop = 0;
  47.             } else {
  48.                 tblTop -= 1;
  49.             }
  50.             $('#' + tableid).css('margin-top', tblTop + 'px');
  51.             clearTimeout(MyMarhq);
  52.             MyMarhq = setTimeout(function() {
  53.                 Marqueehq()
  54.             }, speed);
  55.         }
  57.         MyMarhq = setTimeout(Marqueehq, speed);
  58.         $('#' + tableid).find('tbody').hover(function() {
  59.             clearTimeout(MyMarhq);
  60.         }, function() {
  61.             clearTimeout(MyMarhq);
  62.             if ($('#' + tableid).find('tbody tr').length > len) {
  63.                 MyMarhq = setTimeout(Marqueehq, speed);
  64.             }
  65.         })
  66.     }
  68. }

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！