效果截圖:
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>