datacollect_scroll.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. window.onload = roll(50);
  2. function roll(t) {
  3. var ul1 = document.getElementById("comment1");
  4. var ul2 = document.getElementById("comment2");
  5. var ulbox = document.getElementById("review_box");
  6. ul2.innerHTML = ul1.innerHTML;
  7. ulbox.scrollTop = 0; // 开始无滚动时设为0
  8. // var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  9. var timer = setInterval(rollStart, '40');
  10. // 鼠标移入div时暂停滚动
  11. ulbox.onmouseover = function () {
  12. clearInterval(timer);
  13. }
  14. // 鼠标移出div后继续滚动
  15. ulbox.onmouseout = function () {
  16. // timer = setInterval(rollStart, t);
  17. timer = setInterval(rollStart, '40');
  18. }
  19. }
  20. // 开始滚动函数
  21. function rollStart() {
  22. // 上面声明的DOM对象为局部对象需要再次声明
  23. var ul1 = document.getElementById("comment1");
  24. var ul2 = document.getElementById("comment2");
  25. var ulbox = document.getElementById("review_box");
  26. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  27. if (ulbox.scrollTop >= ul1.scrollHeight) {
  28. ulbox.scrollTop = 0;
  29. } else {
  30. ulbox.scrollTop++;
  31. }
  32. }
  33. // tableScroll('tableId', '100%', 30, 10);
  34. var MyMarhq;
  35. function tableScroll(tableid, hei, speed, len) {
  36. clearTimeout(MyMarhq);
  37. $('#' + tableid).parent().find('.tableid_').remove()
  38. $('#' + tableid).parent().prepend(
  39. '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
  40. ).css({
  41. 'position': 'relative',
  42. 'overflow': 'hidden',
  43. 'height': hei + 'px'
  44. })
  45. $(".tableid_").find('th').each(function(i) {
  46. $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
  47. });
  48. $(".tableid_").css({
  49. 'position': 'absolute',
  50. 'top': 0,
  51. 'left': 0,
  52. 'z-index': 9
  53. })
  54. $('#' + tableid).css({
  55. 'position': 'absolute',
  56. 'top': 0,
  57. 'left': 0,
  58. 'z-index': 1
  59. })
  60. if ($('#' + tableid).find('tbody tr').length > len) {
  61. $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  62. $(".tableid_").css('top', 0);
  63. $('#' + tableid).css('top', 0);
  64. var tblTop = 0;
  65. var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
  66. function Marqueehq() {
  67. if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
  68. tblTop = 0;
  69. } else {
  70. tblTop -= 1;
  71. }
  72. $('#' + tableid).css('margin-top', tblTop + 'px');
  73. clearTimeout(MyMarhq);
  74. MyMarhq = setTimeout(function() {
  75. Marqueehq()
  76. }, speed);
  77. }
  78. MyMarhq = setTimeout(Marqueehq, speed);
  79. $('#' + tableid).find('tbody').hover(function() {
  80. clearTimeout(MyMarhq);
  81. }, function() {
  82. clearTimeout(MyMarhq);
  83. if ($('#' + tableid).find('tbody tr').length > len) {
  84. MyMarhq = setTimeout(Marqueehq, speed);
  85. }
  86. })
  87. }
  88. };