不间断的滚动（横向/纵向）

 

1、纵向不间断的滚动的页面代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 无标题页 </ title >
</ head >
< body >
     < div >
        站内公告 </ div >
     < div  id ="demo"  style ="OVERFLOW: hidden; height: 100px;" >
         < div  id ="marquePic1" >
            第1行 < br  />
            第2行 < br  />
            第3行 < br  />
            第4行 < br  />
            第5行 < br  />
            第6行 < br  />
            第7行 < br  />
            第8行 < br  />
            第9行 < br  />
            第10行 < br  />
            第11行 < br  />
            第12行
         </ div >         
         < div  id ="marquePic2"  valign ="top" >
         </ div >
     </ div >
</ body >
</ html >

< script  type ="text/javascript" >  
// 纵向滚动 需要设置div的高度
var  speed = 30  
marquePic2.innerHTML = marquePic1.innerHTML 
function  Marquee(){ 
if (demo.scrollTop >= marquePic1.scrollHeight){ 
demo.scrollTop = 0  
}
else { 
demo.scrollTop ++  
}} 
var  MyMar = setInterval(Marquee,speed) 
demo.onmouseover = function () {clearInterval(MyMar)} 
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} 
</ script >

 

2、横向不间断的滚动的页面代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 无标题页 </ title >
</ head >
< body >
     < div >
        站内公告 </ div >
     < div  id ="demo"  style ="overflow: hidden; width: 860px; align: center" >
         < table  cellspacing ="0"  cellpadding ="0"  align ="center"  border ="0" >
             < tbody >
                 < tr >
                     < td  id ="marquePic1"  valign ="top" >
                         < table  width ="1800px" >
                             < tr >
                                 < td > 第1个单元格 </ td >
                                 < td > 第2个单元格 </ td >
                                 < td> 第3个单元格 </ td >
                                 < td > 第4个单元格 </ td >
                                 < td > 第5个单元格 </ td >
                                 < td > 第6个单元格 </ td >
                                 < td > 第7个单元格 </ td >
                                 < td > 第8个单元格 </ td >
                                 < td > 第9个单元格 </ td >
                                 < td > 第10个单元格 </ td >
                                 < td > 第11个单元格 </ td >
                                 < td > 第12个单元格 </ td >
                                 < td > 第13个单元格 </ td >
                                 < td > 第14个单元格 </ td >
                                 < td > 第15个单元格 </ td >
                             </ tr >
                         </ table >
                     </ td >
                     < td  id ="marquePic2"  valign ="top" >
                     </ td >
                 </ tr >
             </ tbody >
         </ table >
     </ div >
</ body >
</ html >

< script  type ="text/javascript" >  
// 横向滚动 需要设置div的宽度
var  speed = 30  
marquePic2.innerHTML = marquePic1.innerHTML 
function  Marquee(){ 
if (demo.scrollLeft >= marquePic1.scrollWidth){ 
demo.scrollLeft = 0  
} else { 
demo.scrollLeft ++  
}} 
var  MyMar = setInterval(Marquee,speed) 
demo.onmouseover = function () {clearInterval(MyMar)} 
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} 
</ script >