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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM