新闻列表上下循环滚动效果
2011-12-13 10:44
549 查看
<html>
<head>
<link href="css/siteCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="220">
<tbody>
<tr>
<td height="29" width="28">
<img src="images/t04.jpg" width="28" height="29"></td>
<td class="title" background="images/t05.jpg" width="114">
公示公告</td>
<td class="more" valign="center" background="images/t11.jpg" width="73" align="right">
<a href="/pages/WebSites/Pages/Web/NewsList.aspx?iClass=10">更多>></a></td>
<td width="5">
<img src="images/t12.jpg" width="5" height="29"></td>
</tr>
<tr>
<td bgcolor="#e0ecf8" height="230" colspan="4">
<div style="width: 100%; height: 230px; overflow: hidden" id="ImgDemo" align="center">
<div id="ImgDemo1">
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<span style="width:156px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 公立医院应消除顾虑主消除顾虑主消除顾虑主消除顾虑主消除顾虑主</a></span>[10-21]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈哈</a>[10-22]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈</a>[10-23]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 公立医院应消除顾虑主</a>[10-24]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈</a>[10-25]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 公立医院应消除顾虑主</a>[10-26]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈</a>[10-27]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈</a>[10-28]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 公立医院应消除顾虑主</a>[10-29]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 哈哈哈哈哈哈哈哈哈哈</a>[10-30]</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
<tbody>
<tr>
<td class="list">
<a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
· 公立医院应消除顾虑主</a>[10-31]</td>
</tr>
</tbody>
</table>
</div>
<div id="ImgDemo2">
</div>
</div>
<script language="JavaScript">
var ScrollingSpeed = 60;
ImgDemo2.innerHTML = ImgDemo1.innerHTML;
function ScrollMarquee() {
if (ImgDemo2.offsetTop - ImgDemo.scrollTop <= 0)
{ ImgDemo.scrollTop -= ImgDemo1.offsetHeight }
else
{ ImgDemo.scrollTop++; }
}
var ScrollingMar = setInterval(ScrollMarquee, ScrollingSpeed);
ImgDemo.onmouseover = function () { clearInterval(ScrollingMar); } //鼠标移上时清除定时器达到滚动停止的目的
ImgDemo.onmouseout = function () { ScrollingMar = setInterval(ScrollMarquee, ScrollingSpeed); } //鼠标移开时重设定时器
</script>
<!--上下滚动结束-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现列表自动滚动循环滚动展示新闻
- Android 上下滚动的新闻效果
- 前端js实现新闻列表数据动态滚动效果的函数
- jQuery循环滚动新闻列表
- jQuery循环滚动新闻列表示例代码
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果
- 列表上下滚动效果JS示例
- jQuery循环滚动新闻列表示例代码
- jQuery---循环滚动新闻列表
- 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 多行滚动jQuery循环新闻列表代码
- 基于jquery的循环左右滚动和上下滚动效果（备用记录）
- 友情链接横向文字上下间隙循环滚动JS效果
- jQuery实现列表自动滚动循环滚动展示新闻
- jquery实现的向上无缝循环滚动的新闻效果
- 点击可上下左右滚动的新闻图片列表
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- CSS实现上下循环滚动效果