JS学习笔记之页面信息滚动效果

效果截图：

1、无缝滚动效果

JS代码：

    <script>
        window.onload=function(){
            var oInfobox=document.getElementById('infoBox'),
                speed=60, //设置速度
                timer=null; //设置定时器
            oInfobox.innerHTML+=oInfobox.innerHTML; //复制一份内容，无缝滚动
            timer=setInterval(scrollUp,speed);
            function scrollUp(){
                oInfobox.scrollTop=oInfobox.scrollTop+1;
                if(oInfobox.scrollTop>=oInfobox.offsetHeight){ 
                    //判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
                    oInfobox.scrollTop=0;
                }
            }
            oInfobox.onmouseover=function(){
                clearInterval(timer)
            }
            oInfobox.onmouseout=function(){
                timer=setInterval(scrollUp,speed);
            }
        }
    </script>

 

2、间隔滚动效果

JS代码：

    <script>
        window.onload=function(){
            var oInfobox=document.getElementById('infoBox'),
                oHeight=41,//设置间隔滚动高度
                speed=20, //设置速度
                timer01=null; //设置setInterval定时器
                timer02=null; //设置setTimeout定时器

            oInfobox.innerHTML+=oInfobox.innerHTML; //复制一份内容，无缝滚动

            function startMove(){
                oInfobox.scrollTop++;
                timer01=setInterval(scrollUp,speed);
            }
            function scrollUp(){
                if(oInfobox.scrollTop%oHeight==0){
                    clearInterval(timer01);
                    timer02=setTimeout(startMove,1000);
                }else{
                    oInfobox.scrollTop++;
                    if(oInfobox.scrollTop>=oInfobox.offsetHeight){ 
                        //判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
                        oInfobox.scrollTop=0;
                    }
                }
            }
            startMove();
            oInfobox.onmouseover=function(){
                clearInterval(timer01);
                clearTimeout(timer02);
            }
            oInfobox.onmouseout=function(){
                timer01=setInterval(scrollUp,speed);
            }
        }
    </script>

 

HTML代码：

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">公告信息</div>
            </div>
            <div class="panel-body">
                <div class="infoBox" id="infoBox">
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">1、关于2016年新生入学的通知01</a></li>
                        <li class="list-group-item"><a href="#">2、关于2016年新生入学的通知02</a></li>
                        <li class="list-group-item"><a href="#">3、关于2016年新生入学的通知03</a></li>
                        <li class="list-group-item"><a href="#">4、关于2016年新生入学的通知04</a></li>
                        <li class="list-group-item"><a href="#">5、关于2016年新生入学的通知05</a></li>
                        <li class="list-group-item"><a href="#">6、关于2016年新生入学的通知06</a></li>
                    </ul>
                </div>            
            </div>
        </div>
    </div>

CSS样式：

    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container{ width: 500px; margin: 60px auto; }
        .infoBox{ width:100%; height: 240px; overflow: hidden;}
        .list-group{ margin-bottom: 0; border-radius:0;}
        .list-group li{  border-radius:0 !important; }
        .list-group li:last-child{  border-bottom:0 !important; }
    </style>