不间断的滚动(横向/纵向)

项目中用到的一段不间断的滚动代码,很不错,与大家分享一下。(请注意,javascript是写在页面的最下方)

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;  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>
原文地址:https://www.cnblogs.com/linyechengwei/p/1598241.html