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

一、背景：

　　做项目的时候用户经常喜欢让你在首页中放一些滚动的信息，业务办理呀，通知信息呀什么的。正常用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>
复制代码

三、总结：

如果你想做到公告条数大于给定区域显示空间的时候再执行滚动效果怎么办？

只要判断这个table下的行数就可以了（通过js脚本实现），如果大于某个值在执行滚动效果。具体代码不再写了。。。

posted @ 2012-07-15 13:13  小锋神  阅读(3992)  评论(1)  编辑  收藏  举报