怎样让一个Table下的所有<tr>组滚动显示？ 用JQuery。该如何处理
日期：2014-05-16 浏览次数：20399 次
怎样让一个Table下的所有<tr>组滚动显示？- 用JQuery。
怎样让一个Table下的所有<tr>组滚动显示？- 用JQuery。
如例所示，每组<tr>都是一条数据，我想让数据从上到下滚动显示，当鼠标停留在数据上的时候暂定滚动。
------解决方案--------------------
用EXT吧!只是见过,没有用过.
------解决方案--------------------
function scrollNews() {
var areaEl = document.getElementById("lastNewsCon"),//放Table的层
areaHeight = 200,
conEl = document.getElementById("newsCon"),//Table
height = conEl.offsetHeight,
stopscroll = false;
globalParams.newsScroll.areaEl = areaEl;
globalParams.newsScroll.stopscroll = stopscroll;
globalParams.newsScroll.height = height;
//初始化滚动内容
if (!$.trim(conEl.innerHTML) || height < areaHeight)
return;
conEl.innerHTML += conEl.innerHTML;
conEl.onmouseover = function() {
globalParams.newsScroll.stopscroll = true;
return false;
}
conEl.onmouseout = function() {
globalParams.newsScroll.stopscroll = false;
return false;
}
window.setInterval("scrollUp()", 200);
}
function scrollUp() {
var p = globalParams.newsScroll;
if (p.stopscroll == true) return;
if (p.areaEl.scrollTop == p.height - 2)
p.areaEl.scrollTop = 0;
else
p.areaEl.scrollTop += 2;
}
------解决方案--------------------
怎样让一个Table下的所有<tr>组滚动显示？- 用JQuery。
如例所示，每组<tr>都是一条数据，我想让数据从上到下滚动显示，当鼠标停留在数据上的时候暂定滚动。
- JScript code
<table class="class1" id="table1"> <tr><td .../><td .../></tr> <tr><td .../><td .../></tr> <tr><td .../><td .../></tr> ... </table>
------解决方案--------------------
用EXT吧!只是见过,没有用过.
------解决方案--------------------
function scrollNews() {
var areaEl = document.getElementById("lastNewsCon"),//放Table的层
areaHeight = 200,
conEl = document.getElementById("newsCon"),//Table
height = conEl.offsetHeight,
stopscroll = false;
globalParams.newsScroll.areaEl = areaEl;
globalParams.newsScroll.stopscroll = stopscroll;
globalParams.newsScroll.height = height;
//初始化滚动内容
if (!$.trim(conEl.innerHTML) || height < areaHeight)
return;
conEl.innerHTML += conEl.innerHTML;
conEl.onmouseover = function() {
globalParams.newsScroll.stopscroll = true;
return false;
}
conEl.onmouseout = function() {
globalParams.newsScroll.stopscroll = false;
return false;
}
window.setInterval("scrollUp()", 200);
}
function scrollUp() {
var p = globalParams.newsScroll;
if (p.stopscroll == true) return;
if (p.areaEl.scrollTop == p.height - 2)
p.areaEl.scrollTop = 0;
else
p.areaEl.scrollTop += 2;
}
------解决方案--------------------
- JScript code
<script>
//从下往上滚
function scroll1(){
var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 > tbody").get(0)
var row = table.firstChild;
table.removeChild(row);
table.appendChild(row); //可以通过ajax去取后面的数据
}
//从上往下滚
function scroll2(){
var table = document.getElementById("table1").getElementsByTagName("tbody")[0];
var row = table.lastChild;
table.removeChild(row);
table.insertBefore(row,table.firstChild);
}
</script>
<table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)">
<tr><td>aaa</td><td>aaa</td></tr>
<tr><td>bbb</td><td>bbb</td></tr>
<tr><td>ccc</td><td>ccc</td></tr>
<tr><td>xxx</td><td>xxx</td></tr>
<tr><td>yyy</td><td>yyy</td></tr>
<tr><td>zzz</td><td>zzz</td></tr>
</table>
------解决方案--------------------
<script type="text/javascript" language="javascript">
function Scroll(opt,callback){
scrollBox = $("#table1");
if(!opt) var opt={};
var _this=scrollBox.eq(0).find("tr:first");
var lineH=_this.find("td:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(scrollBox.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):5000, //卷动速度，数值越大，速度越慢（毫秒）
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
