js 新闻向上滚动

新闻一条条的无缝向上滚动 关键css最外层必须有overflow:hidden; 固定个高度;

 

HTML结构

  <div id="new_list">

                     <ul id="news1">
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                         <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
                     </ul>
                     <div id="news2"></div>
                 </div>

CSS

#new_list{
    display: block;
    float: left;
    width: 600px;
    height: 36px;
    overflow: hidden;
}
#new_list #news1{
    width: 100%;
}

JS原生代码

  var speed=40;
    window.onload=function(){
        var demo=document.getElementById("new_list");
        var demo2=document.getElementById("news2");
        var demo1=document.getElementById("news1");
        demo2.innerHTML=demo1.innerHTML
        function Marquee(){
            if(demo.scrollTop>=demo1.offsetHeight){
                demo.scrollTop=0;
            }
            else{
                demo.scrollTop=demo.scrollTop+1;
            }
        }
        var MyMar=setInterval(Marquee,speed)
        demo.onmouseover=function(){clearInterval(MyMar)}
        demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    }

完整实例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>文字列表无缝向上滚动代码</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
            border:0px;
        }
        body{font-size:12px}
        #new_list{
            display: block;
            float: left;
            width: 600px;
            height: 36px;
            overflow: hidden;
        }
        #new_list #news1{
            width: 100%;
        }
        #new_list li{
            width: 100%;
           
        }
    </style>
    <script type="text/javascript">
        var speed=40;
        window.onload=function(){
            var demo=document.getElementById("new_list");
            var demo2=document.getElementById("news2");
            var demo1=document.getElementById("news1");
            demo2.innerHTML=demo1.innerHTML
            function Marquee(){
                if(demo.scrollTop>=demo1.offsetHeight){
                    demo.scrollTop=0;
                }
                else{
                    demo.scrollTop=demo.scrollTop+1;
                }
            }
            var MyMar=setInterval(Marquee,speed)
            demo.onmouseover=function(){clearInterval(MyMar)}
            demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
        }
    </script>
</head>
<body>
<div id="new_list">

    <ul id="news1">
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
        <li>说云解惑 共赢云端——2015象云技术分享高峰沙龙</li>
    </ul>
    <div id="news2"></div>
</div>
</body>
</html>

　　

　　

　　

　　

posted @ 2016-01-28 10:03  星耀学园  阅读(401)  评论(0)    收藏  举报