marquee+js实现某个区域的“无缝滚动效果”

最新推荐文章于 2021-12-05 01:47:27 发布

weixin_30363509

最新推荐文章于 2021-12-05 01:47:27 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lihaibo/archive/2011/10/10/2205573.html

版权

一、背景：

　　做项目的时候用户经常喜欢让你在首页中放一些滚动的信息，业务办理呀，通知信息呀什么的。正常用marquee就可以直接实现了，但是我们会遇到这种情况，就是如果滚动区域很大的情况下，你会发现滚动信息的末尾必须滚完才能从底下或者右边（从下往上或从右往左滚动）接着滚动，这样中间会留下很多空白区域，不太好看，如果你想把他做的完美一下，就可以结合js脚本来实现无缝滚动的效果。

二、代码实现：

<html>
<head></head>
<body>
<form id="form1">
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 230px; HEIGHT: 150px">
<DIV id=demo1>
<table width="237" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
<tr>
<td height="25">·<a href="#">公告标题</a></td>
</tr>
</table>
</DIV>
<DIV id=demo2></DIV>
<SCRIPT type="text/javascript">
var speed=30
 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>
</form>
</body>
</html>