zoukankan      html  css  js  c++  java
  • 不间断的滚动(横向/纵向)

    项目中用到的一段不间断的滚动代码,很不错,与大家分享一下。(请注意,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>
  • 相关阅读:
    linux下udp编程
    gitlab和Django实现push自动更新
    gitlab和Django实现push自动更新
    gitlab和Django实现push自动更新
    python通过163邮箱发送邮件
    python通过163邮箱发送邮件
    爬虫的分类
    Webmagic之使用Pipeline保存结果
    Webmagci功能--获取链接
    Webmagic功能--抽取元素
  • 原文地址:https://www.cnblogs.com/linyechengwei/p/1598241.html
Copyright © 2011-2022 走看看