datacollect_scroll.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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. ul6.innerHTML = ul5.innerHTML;
  71. ulbox3.scrollTop = 0; // 开始无滚动时设为0
  72. // var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  73. var timer3 = setInterval(rollStart3, '40');
  74. ulbox3.onmouseover = function () {
  75. clearInterval(timer3);
  76. }
  77. // 鼠标移出div后继续滚动
  78. ulbox3.onmouseout = function () {
  79. // timer = setInterval(rollStart, t);
  80. timer3 = setInterval(rollStart3, '40');
  81. }
  82. }
  83. function rollStart3() {
  84. // 上面声明的DOM对象为局部对象需要再次声明
  85. var ul5 = document.getElementById("comment5");
  86. var ul6 = document.getElementById("comment6");
  87. var ulbox3 = document.getElementById("review_box3");
  88. // console.log(ulbox3.scrollTop);
  89. // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  90. if (ulbox3.scrollTop >= ul5.scrollHeight) {
  91. ulbox3.scrollTop = 0;
  92. } else {
  93. ulbox3.scrollTop++;
  94. }
  95. }
  96. // tableScroll('tableId', '100%', 30, 10);
  97. var MyMarhq;
  98. function tableScroll(tableid, hei, speed, len) {
  99. clearTimeout(MyMarhq);
  100. $('#' + tableid).parent().find('.tableid_').remove()
  101. $('#' + tableid).parent().prepend(
  102. '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
  103. ).css({
  104. 'position': 'relative',
  105. 'overflow': 'hidden',
  106. 'height': hei + 'px'
  107. })
  108. $('#' + tableid).parent().find('.tableid_').find('th').each(function(i) {
  109. $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').innerWidth());
  110. });
  111. $('#' + tableid).parent().find('.tableid_').css({
  112. 'position': 'absolute',
  113. 'top': 0,
  114. 'left': 0,
  115. 'z-index': 9
  116. })
  117. $('#' + tableid).css({
  118. 'position': 'absolute',
  119. 'top': 0,
  120. 'left': 0,
  121. 'z-index': 1
  122. })
  123. if ($('#' + tableid).find('tbody tr').length > len) {
  124. if ($('#' + tableid).find('tbody tr').length > 30) {
  125. $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  126. } else {
  127. $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
  128. }
  129. $('#' + tableid).parent().find('.tableid_').css('top', 0);
  130. $('#' + tableid).css('top', 0);
  131. var tblTop = 0;
  132. var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
  133. function Marqueehq() {
  134. if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
  135. tblTop = 0;
  136. } else {
  137. tblTop -= 1;
  138. }
  139. $('#' + tableid).css('margin-top', tblTop + 'px');
  140. clearTimeout(MyMarhq);
  141. MyMarhq = setTimeout(function() {
  142. Marqueehq()
  143. }, speed);
  144. }
  145. MyMarhq = setTimeout(Marqueehq, speed);
  146. $('#' + tableid).find('tbody').hover(function() {
  147. clearTimeout(MyMarhq);
  148. }, function() {
  149. clearTimeout(MyMarhq);
  150. if ($('#' + tableid).find('tbody tr').length > len) {
  151. MyMarhq = setTimeout(Marqueehq, speed);
  152. }
  153. })
  154. }
  155. };