JS学习笔记之页面信息滚动效果
2016-03-23 11:15
453 查看
效果截图:
![](http://images2015.cnblogs.com/blog/738658/201603/738658-20160323111344761-1055997093.png)
1、无缝滚动效果
JS代码:
2、间隔滚动效果
JS代码:
HTML代码:
CSS样式:
![](http://images2015.cnblogs.com/blog/738658/201603/738658-20160323111344761-1055997093.png)
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>
相关文章推荐
- jsp设置footer底部内容
- JS类型转换
- web js
- JSP学习
- 三张图搞懂JavaScript的原型对象与原型链
- JavaScript修改页面title
- JavaScript学习笔记之数组随机排序
- 12、Extjs添加悬浮框
- js闭包
- json日期格式转换
- JavaScript打印页面的指定内容
- JS解析json数据
- js中几种实用的跨域方法原理详解
- JavaScript学习笔记之数组求和方法
- 绕过/*,web.xml直接访问jsp
- D3.js中文文档
- 三张图搞懂JavaScript的原型对象与原型链
- JS 网页打印解决方案
- indexOf(),substring()函数的学习与使用总结
- JavaScript学习笔记之数组的增、删、改、查