列表向上滚动显示

最新推荐文章于 2021-06-09 19:06:40 发布

原创最新推荐文章于 2021-06-09 19:06:40 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

此博客展示了如何实现培训动态的实时滚动显示与信息更新，通过JavaScript代码实现实时刷新与滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

				<div class="body_bg_left" style="overflow:hidden;zoom:1;width:248px;">
					<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
					  <tr>
					  	<td class="news_pxdt">  培训动态</td>
					  </tr>
					  <tr>
					    <td height="14"></td>
					  </tr>
						<tr>
					  	<td>
					  		<div id="demo" style="overflow:hidden;height:100px;">
					  			<span id="demo1">	
					  			 <ul>			  		
										<%
						  					List classStateInfo=getClassStateInfo(ut_siteId);
						  					for(int i=0;i<classStateInfo.size();i++){
						  							String [] info=(String[])classStateInfo.get(i);  						
						  			%>
							    		<li class="xm_ks">
							    			<p> ·<a href="training_course_state.jsp?class_info_id=<%=info[3]%>" target="_self"><%=info[0]==null?"":info[0]%></a></p>
							          <p>   <%=info[1]==null?"":info[1]%>至<%=info[2]==null?"":info[2]%></p>
									    </li>
										<%}%>
										</ul>
									</span> 
									<span id="demo2"></span>
								</div>	
							</td>
						</tr>
	  			</table>
	  			<script> 
	  							//信息滚动显示
									var speed=100; 
									var demo=document.getElementById("demo"); 
									var demo2=document.getElementById("demo2"); 
									var demo1=document.getElementById("demo1"); 
									if(<%=classStateInfo.size()%>>=2){
										//大于两条开始重复
										demo2.innerHTML=demo1.innerHTML; 
								  }
									function Marquee(){ 
									if(demo2.offsetTop-demo.scrollTop<=0) 
									  demo.scrollTop-=demo1.offsetHeight; 
									else{ 
									  demo.scrollTop++; 
									} 
									} 
									var MyMar=setInterval(Marquee,speed); 
									demo.onmouseover=function() {clearInterval(MyMar)} 
									demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
					</script> 
	  		</div>