正文
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>
