zoukankan      html  css  js  c++  java
  • js实现新闻滚动-单行滚动或者多行滚动

    注明:都是转载。

    先说单行滚动:

    --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html-----------

    <!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>
    <FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
    a{
    display:block;
    font-size:12px;
    line-height:18px;
    text-decoration:none;
    color:#333;
    font-family:Arial;
    }
    .shell{
    background:url(/effectimages/xml.gif) no-repeat 4px 5px;
    border:1px solid #aaa;
    400px;
    padding:3px 2px 2px 20px;
    }
    #div1{
    height:18px;
    overflow:hidden;
    }
    </style>
    </head>
    <body>
    <!--把下面代码加到<body>与</body>之间-->
    <div class="shell">
    <div id="div1">
    <a href="javascript:" _fcksavedurl="javascript:">请教高手帮我看下这段代码:FLASH显示不了</a>
    <a href="javascript:" _fcksavedurl="javascript:">请教在UTF-8编辑下的符号显示问题</a>
    <a href="javascript:" _fcksavedurl="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:" _fcksavedurl="javascript:">技术研究:QQ2009版按钮渐显渐隐的由来</a>
    <a href="javascript:" _fcksavedurl="javascript:">Javascript读取Json数据并分页显示,支持键盘和滚轮翻页</a>
    <a href="javascript:" _fcksavedurl="javascript:">奇怪的PNG文件,拜师以求解惑</a>
    <a href="javascript:" _fcksavedurl="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件</a>
    </div>
    </div>
    <script language="javascript">
    var box=document.getElementById("div1"),can=true;
    box.innerHTML+=box.innerHTML;
    box.onmouseover=function(){can=false};
    box.onmouseout=function(){can=true};
    new function (){
    var stop=box.scrollTop%18==0&&!can;
    if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++;
    setTimeout(arguments.callee,box.scrollTop%18?10:1500);
    };
    </script>
    </body>
    </html>

    --------------------------------------------

    ------------多行滚动,复制一下代码即可实现----------------------------

    转载http://www.cnblogs.com/dearxinli/p/3770803.html

    -----------------------------------------------------------------------------

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>

    <style type="text/css">
    .inform {
        border: 1px solid #E5E5E5;
        padding: 1px;
    }
    .inform h2 {
        background: none repeat scroll 0 0 #015198;
        font-weight: normal;
        line-height: 30px;
    }
    .inform h2 span {
        color: #FFFFFF;
        font-size: 16px;
        padding-left: 10px;
    }
    .inform h2 a {
        color: #FFFFFF;
        float: right;
        font-size: 14px;
        padding-right: 3px;
    }
    .inform ul {
        height: 170px;
        margin-top: 7px;
        overflow: hidden;
    }
    .inform ul li {
        line-height: 26px;
        padding-left: 12px;
    }
    </style>
    </head>

    <body>
    <div class="inform">
      <div style="height:170px; overflow:hidden">
        <ul id="marquee" style="height:285px">
                                                    <li><a title="添加时间:2014-06-05 点击次数:139" href="/index.php?r=archives/default/new&id=6044&t=1401953184" target="_blank">
            华医学会临床医学科研专项资金...</a></li>
                                <li><a title="添加时间:2014-06-05 点击次数:192" href="/index.php?r=archives/default/new&id=6043&t=1401953184" target="_blank">
            第四届职工文化艺术节活动方案</a></li>
                                <li><a title="添加时间:2014-06-04 点击次数:154" href="/index.php?r=archives/default/new&id=6040&t=1401953184" target="_blank">
            关于开展国家技术标准资源服务...</a></li>
                                <li><a title="添加时间:2014-06-04 点击次数:145" href="/index.php?r=archives/default/new&id=6038&t=1401953184" target="_blank">
            科技部关于组织申报科技基础性...</a></li>
                                <li><a title="添加时间:2014-06-03 点击次数:203" href="/index.php?r=archives/default/new&id=6032&t=1401953184" target="_blank">
            关于印发《国家自然科学基金优...</a></li>
                                <li><a title="添加时间:2014-06-03 点击次数:89" href="/index.php?r=archives/default/new&id=6031&t=1401953184" target="_blank">
            UpToDate数据库培训讲座</a></li>
                                <li><a title="添加时间:2014-05-29 点击次数:288" href="/index.php?r=archives/default/new&id=6015&t=1401953184" target="_blank">
            手卫生工作简讯</a></li>
                                <li><a title="添加时间:2014-05-26 点击次数:675" href="/index.php?r=archives/default/new&id=5831&t=1401953184" target="_blank">
            2014年“端午节”门急诊医...</a></li>
                                <li><a title="添加时间:2014-05-21 点击次数:736" href="/index.php?r=archives/default/new&id=5671&t=1401953184" target="_blank">
            国家自然科学基金委员会关于受...</a></li>
                                <li><a title="添加时间:2014-05-21 点击次数:622" href="/index.php?r=archives/default/new&id=5669&t=1401953184" target="_blank">
            UpToDate数据库试用通知</a></li>
         
            <li>&nbsp;</li>  
        </ul>
       </div>
                        
    <script type="text/javascript">
    window.onload = function() {  
        setTimeout("startmarquee(34, 50, 0, 'marquee')", 1000);  
    }
    function startmarquee(lh,speed,delay,id) {  

        var t;  
        var p = false;  
        var o = document.getElementById(id);  
        o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;  
        o.onmouseover = function() {  
            p = true;  
        }  
        o.onmouseout = function() {  
            p = false;  
        }  
        o.scrollTop = 0;  
      
        function start() {  
            t = setInterval(scrolling,speed);  
            if(!p) o.scrollTop += 2;  
        }  
      
        function scrolling() {  
            if(o.scrollTop%lh != 0) {  
                o.scrollTop += 2;  
                if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;  
            } else {  
                clearInterval(t);  
                setTimeout(start,delay);  
            }  
        }  
        setTimeout(start,delay);  


    </script>
    </div>
    </body>
    </html>

    -----------------------------

  • 相关阅读:
    HDU 6071
    HDU 6073
    HDU 2124 Repair the Wall(贪心)
    HDU 2037 今年暑假不AC(贪心)
    HDU 1257 最少拦截系统(贪心)
    HDU 1789 Doing Homework again(贪心)
    HDU 1009 FatMouse' Trade(贪心)
    HDU 2216 Game III(BFS)
    HDU 1509 Windows Message Queue(队列)
    HDU 1081 To The Max(动态规划)
  • 原文地址:https://www.cnblogs.com/aji2014/p/5426369.html
Copyright © 2011-2022 走看看