This article for you want to introduce the jquery implementation of the page Dynamic Data scrolling effect. It seems only through the div-ul-li tag nested way to achieve the table multiple rows and columns of scrolling effect
Copy code code is as follows:
<script language= "javascript" src= "Lirms/test/jquery-1.4.2.js" ></script>
<script language= "javascript" src= "Lirms/test/vticker.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Roll"). each (function () {
$ (this). Vticker ({
showitems:18,//show number of scrolling rows
pause:3000,//rolling intermittent
speed:500,//rolling speed
Animation: "Fade",
Mousepause:false,
direction: "Up",///scrolling direction
});
});
});
</script>
It seems that only through the div-ul-li tag nested way to achieve multiple rows of table scrolling effect (if there are improvements, please advise!) )
Copy Code code as follows:
<div class= "conn" >
<table>
<tr>
<th style= "width:50px;" > Serial number </th>
<th style= "width:150px;" > Name </th>
<th style= "width:80px;" > Quarterly Completion </th>
<th style= "width:50px;" > Yesterday </th>
<th style= "width:70px;" > Complete Progress </th>
<th style= "width:80px;" > Basic Indicators </th>
<th style= "width:70px;" > Challenges </th>
</tr>
<tr>
<td colspan= "7" >
<div class= "Roll" >
<ul >
<c:foreach items= "${statislist}" var= "s" varstatus= "I" >
<c:set var= "cs" value= "" ></c:set& Gt
<c:set var= "index" value= "" ></c:set>
<c:if test= "${i.index < 9}" >
<c:set var= "Inde X "value=" 0 ></c:set>
</c:if>
<c:if test= "${i.index% 2==0}" >
<c:set var= "CS" value = "background: #ebf6fd;" ></c:set>
</c:if>
<li style= "Height:30px;width:550px;line-heIght:30px;${cs} ">
<div style=" width:50px;text-align:center;float:left; " >${index} ${i.count}</div>
<div style= "width:150px;text-align:center;float:left;" >${s.name}</div>
<div style= "width:80px;text-align:center;float:left;" >${s.number}</div>
<div style= "width:50px;text-align:center;float:left;" >${s.zuori}</div>
<div style= "width:70px;text-align:center;float:left;" >${s.wcjb}</div>
<div style= "width:80px;text-align:center;float:left;" >${s.jbzb}</div>
<div style= "width:70px;text-align:center;float:left;" >${s.tzzb}</div>
</li>
</c:forEach>
</ul>
</div>
</td> </tr>
</table>
</div>