datacollect_scroll.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. window.onload = roll(50);
  2. window.onload = roll2(50);
  3. window.onload = roll3(50);
  4. function roll(t) {
  5. var ul1 = document.getElementById("comment1");
  6. var ul2 = document.getElementById("comment2");
  7. var ulbox = document.getElementById("review_box");
  8. ul2.innerHTML = ul1.innerHTML;
  9. ulbox.scrollTop = 0; // 开始无滚动时设为0
  10. // var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  11. var timer = setInterval(rollStart, '40');
  12. // 鼠标移入div时暂停滚动
  13. ulbox.onmouseover = function () {
  14. clearInterval(timer);
  15. }
  16. // 鼠标移出div后继续滚动
  17. ulbox.onmouseout = function () {
  18. // timer = setInterval(rollStart, t);
  19. timer = setInterval(rollStart, '40');
  20. }
  21. }
  22. // 开始滚动函数
  23. function rollStart() {
  24. // 上面声明的DOM对象为局部对象需要再次声明
  25. var ul1 = document.getElementById("comment1");
  26. var ul2 = document.getElementById("comment2");
  27. var ulbox = document.getElementById("review_box");
  28. // console.log(ulbox.scrollTop);
  29. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  30. if (ulbox.scrollTop >= ul1.scrollHeight) {
  31. ulbox.scrollTop = 0;
  32. } else {
  33. ulbox.scrollTop++;
  34. }
  35. }
  36. function roll2(t) {
  37. var ul3 = document.getElementById("comment3");
  38. var ul4 = document.getElementById("comment4");
  39. var ulbox2 = document.getElementById("review_box2");
  40. ul4.innerHTML = ul3.innerHTML;
  41. ulbox2.scrollTop = 0; // 开始无滚动时设为0
  42. // var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  43. var timer2 = setInterval(rollStart2, '40');
  44. ulbox2.onmouseover = function () {
  45. clearInterval(timer2);
  46. }
  47. // 鼠标移出div后继续滚动
  48. ulbox2.onmouseout = function () {
  49. // timer = setInterval(rollStart, t);
  50. timer2 = setInterval(rollStart2, '40');
  51. }
  52. }
  53. function rollStart2() {
  54. // 上面声明的DOM对象为局部对象需要再次声明
  55. var ul3 = document.getElementById("comment3");
  56. var ul4 = document.getElementById("comment4");
  57. var ulbox2 = document.getElementById("review_box2");
  58. // console.log(ulbox2.scrollTop);
  59. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  60. if (ulbox2.scrollTop >= ul3.scrollHeight) {
  61. ulbox2.scrollTop = 0;
  62. } else {
  63. ulbox2.scrollTop++;
  64. }
  65. }
  66. function roll3(t) {
  67. var ul5 = document.getElementById("comment5");
  68. var ul6 = document.getElementById("comment6");
  69. var ulbox3 = document.getElementById("review_box3");
  70. if (!ul5 || !ul6) return;
  71. ul6.innerHTML = ul5.innerHTML;
  72. ulbox3.scrollTop = 0; // 开始无滚动时设为0
  73. // var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  74. var timer3 = setInterval(rollStart3, '40');
  75. ulbox3.onmouseover = function () {
  76. clearInterval(timer3);
  77. }
  78. // 鼠标移出div后继续滚动
  79. ulbox3.onmouseout = function () {
  80. // timer = setInterval(rollStart, t);
  81. timer3 = setInterval(rollStart3, '40');
  82. }
  83. }
  84. function rollStart3() {
  85. // 上面声明的DOM对象为局部对象需要再次声明
  86. var ul5 = document.getElementById("comment5");
  87. var ul6 = document.getElementById("comment6");
  88. var ulbox3 = document.getElementById("review_box3");
  89. // console.log(ulbox3.scrollTop);
  90. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  91. if (ulbox3.scrollTop >= ul5.scrollHeight) {
  92. ulbox3.scrollTop = 0;
  93. } else {
  94. ulbox3.scrollTop++;
  95. }
  96. }
  97. // tableScroll('tableId', '100%', 30, 10);
  98. var MyMarhq;
  99. function tableScroll(tableid, hei, speed, len) {
  100. clearTimeout(MyMarhq);
  101. $('#' + tableid).parent().find('.tableid_').remove()
  102. $('#' + tableid).parent().prepend(
  103. '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
  104. ).css({
  105. 'position': 'relative',
  106. 'overflow': 'hidden',
  107. 'height': hei + 'px'
  108. })
  109. $('#' + tableid).parent().find('.tableid_').find('th').each(function(i) {
  110. $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').innerWidth());
  111. });
  112. $('#' + tableid).parent().find('.tableid_').css({
  113. 'position': 'absolute',
  114. 'top': 0,
  115. 'left': 0,
  116. 'z-index': 9
  117. })
  118. $('#' + tableid).css({
  119. 'position': 'absolute',
  120. 'top': 0,
  121. 'left': 0,
  122. 'z-index': 1
  123. })
  124. if ($('#' + tableid).find('tbody tr').length > len) {
  125. if ($('#' + tableid).find('tbody tr').length > 30) {
  126. $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  127. } else {
  128. $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  129. }
  130. $('#' + tableid).parent().find('.tableid_').css('top', 0);
  131. $('#' + tableid).css('top', 0);
  132. var tblTop = 0;
  133. var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
  134. function Marqueehq() {
  135. if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
  136. tblTop = 0;
  137. } else {
  138. tblTop -= 1;
  139. }
  140. $('#' + tableid).css('margin-top', tblTop + 'px');
  141. clearTimeout(MyMarhq);
  142. MyMarhq = setTimeout(function() {
  143. Marqueehq()
  144. }, speed);
  145. }
  146. MyMarhq = setTimeout(Marqueehq, speed);
  147. $('#' + tableid).find('tbody').hover(function() {
  148. clearTimeout(MyMarhq);
  149. }, function() {
  150. clearTimeout(MyMarhq);
  151. if ($('#' + tableid).find('tbody tr').length > len) {
  152. MyMarhq = setTimeout(Marqueehq, speed);
  153. }
  154. })
  155. }
  156. };