无缝滚动和 marquee

向上无缝滚动

<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>
</DIV>
<SCRIPT>
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>

横向无缝滚动

<DIV id=demo style="OVERFLOW: hidden; WIDTH:380px; COLOR: #ffffff">
  <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
    <TBODY>
      <TR>
        <TD id=demo1 vAlign=top><table width="380" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><img src="images/pro01.jpg" width="103" height="100"></td>
              <td><img src="images/pro02.jpg" width="103" height="100"></td>
              <td><img src="images/pro03.jpg" width="103" height="100"></td>
              <td><img src="images/pro04.jpg" width="103" height="100"></td>
              <td><img src="images/pro05.jpg" width="103" height="100"></td>
              <td><img src="images/pro06.jpg" width="103" height="100"></td>
              <td><img src="images/pro07.jpg" width="103" height="100"></td>
              <td><img src="images/pro08.jpg" width="103" height="100"></td>
            </tr>
          </table></TD>
        <TD id=demo2 vAlign=top>&nbsp;</TD>
      </TR>
    </TBODY>
  </TABLE>
</DIV>
<script>var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed3)}</script>

 

从左向右滚动marquee

<MARQUEE οnmοuseοver=stop() οnmοuseοut=start() scrollAmount=5 loop=infinite height=81 deplay="0">从左向右滚动marquee
</MARQUEE>

 

转载自http://blog.sina.com.cn/s/blog_5eb4684c0100qzn7.html

转载于:https://www.cnblogs.com/shangguan/archive/2013/06/14/3135133.html