• 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>

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

  • 相关阅读:
    全国哀悼日 灰色CSS滤镜 PENGHAO
    Jmail发信函数 PENGHAO
    XHTML 1.0 参考 PENGHAO
    今天搬家。。 PENGHAO
    JS代码Checkbox控制输入框 PENGHAO
    CSS hack:区分IE6,IE7,firefox PENGHAO
    获取表中新记录(下一条记录)的主键值的存储过程 PENGHAO
    五种提高 SQL 性能的方法 PENGHAO
    [收藏 ]针对IE网页浏览器不同版本解释的CSS或javascript PENGHAO
    小本创业者的致胜法宝! PENGHAO
  • 原文地址:https://www.cnblogs.com/aji2014/p/5426369.html
Copyright © 2020-2023  润新知