您的位置：首页 > Web前端 > JavaScript

javascript插件库之无缝信息滚动（part2）

2019-03-29 21:45 85 查看

今天来学习信息的无缝滚动。

知识点：

  1. setTimeout(表达式，延迟时间) 在执行时，是在载入后延长指定时间后，去执行一次表达式。只进执行一次。
  2. setInterval(表达式，交互时间)在执行时，它从载入后，每隔指定的时间就执行一次表达式。

无缝滚动 

[code]<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info {
width: 600px;
height: 196px;
overflow: hidden;
background-color: bisque;
}

#info p {
width: 100%;
height: 30px;
padding: 5px;
line-height: 30px;
margin: 0;
background-color: cornflowerblue;
}

#info ol {
width: 100%;
height: 156px;
margin: 0 auto;
/*padding-top:10px ;*/
box-sizing: border-box;
overflow: hidden;
}

#info ol li {
height: 26px;
line-height: 26px;
}

#infobox {
width: 100%;
height: 156px;
overflow: hidden;
}
</style>
</head>

<body>
<div id="info">
<p>新闻</p>
<div id="infobox">
<ol id="olinfo">
<li>
<a href="">华为593亿净利碾压茅台中石油 员工平均年薪60万</a>
</li>
<li>
<a href="">报告：无偿加班普遍 七成受访白领没加班补贴</a>
</li>
<li>
<a href="">不合格食品达693吨！2018年食品安全抽检出了哪些问题？</a>
</li>
<li>
<a href="">证监会成立投资者保护工作领导小组 易会满任组长</a>
</li>
<li>
<a href="">返乡就业,震后迁居:化工园区入驻17年,响水村民的进与退</a>
</li>
<li>
<a href="">五大行2018年共赚1万亿！日均赚27.6亿 净利润增速均超4％</a>
</li>
</ol>
<ol id="olinfo2"></ol>
</div>
</div>
<script type="text/javascript">
var infobox = document.getElementById("infobox");
var olname = document.getElementById("olinfo");
var olname2 = document.getElementById("olinfo2");
olname2.innerHTML = olname.innerHTML;
function scrollup() {
if(infobox.scrollTop >= olname.offsetHeight) {
infobox.scrollTop = 0;
} else {
infobox.scrollTop++
}
}
var time = 50;
var scroll = setInterval('scrollup()', time);
infobox.onmouseover =function(){
clearInterval(scroll);
}
infobox.onmouseout =function(){
scroll = setInterval('scrollup()', time);
}
</script>
</body>

</html>

结果为：

文字会一直滚动，当鼠标移上去，则停止向上滚动，移开鼠标则继续滚动。 

说明：

这样写可以把第一个ol直接复制给ol2；

[code]olname2.innerHTML = olname.innerHTML;

当ol外层包裹的div#infobox的滚动的高度等于ol的高度时在，则执行。

[code]infobox.scrollTop >= olname.offsetHeight

这第一个sh 鼠标事件为移入时停止滚动，第二个事件为鼠标移出事件，则继续滚动

[code]infobox.onmouseover =function(){
clearInterval(scroll);
}
infobox.onmouseout =function(){
scroll = setInterval('scrollup()', time);
}

间歇性滚动

[code]<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info {
width: 600px;
overflow: hidden;
background-color: bisque;
}

#info p {
width: 100%;
height: 30px;
padding: 5px;
line-height: 30px;
margin: 0;
background-color: cornflowerblue;
}

#info ol {
width: 100%;
height: 156px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
}

#info ol li {
height: 26px;
line-height: 26px;
}

#infobox {
width: 100%;
height: 52px;
overflow: hidden;
}
</style>
</head>

<body>
<div id="info">
<p>新闻</p>
<div id="infobox">
<ol id="olinfo">
<li>
<a href="">华为593亿净利碾压茅台中石油 员工平均年薪60万</a>
</li>
<li>
<a href="">报告：无偿加班普遍 七成受访白领没加班补贴</a>
</li>
<li>
<a href="">不合格食品达693吨！2018年食品安全抽检出了哪些问题？</a>
</li>
<li>
<a href="">证监会成立投资者保护工作领导小组 易会满任组长</a>
</li>
<li>
<a href="">返乡就业,震后迁居:化工园区入驻17年,响水村民的进与退</a>
</li>
<li>
<a href="">五大行2018年共赚1万亿！日均赚27.6亿 净利润增速均超4％</a>
</li>
</ol>
</div>
</div>
<script type="text/javascript">
var infobox = document.getElementById("infobox");
var lih = 52;//2行的高度
infobox.innerHTML += infobox.innerHTML;	//复制相同的ol内容
infobox.scrollTop = 0;
var time=50;
var t;
function aa(){
infobox.scrollTop++;
t = setInterval("scrollup()",time)//继续执行滚动事件
}

function scrollup(){
if(infobox.scrollTop % lih == 0){
clearInterval(t);//当infobox.scrollTop能被lih高度整除则停止滚动
setTimeout("aa()",2000)//在2000毫秒触发这个事件
}else{
infobox.scrollTop++;//如果infobox.scrollTop没被整除则继续滚动
if(infobox.scrollTop>=infobox.scrollHeight/2){
infobox.scrollTop = 0;//如果滚动完，则高度回到0，继续滚动
}
}
}
setTimeout("aa()",2000)//2000毫秒后开始这个滚动
</script>
</body>

</html>

结果为：2行2行的滚动

 说明：当清除了这个滚动事件后，继续执行infobox.scrollTop++;但是setTimeout只执行一次，如何让它循环执行，就要写个函式包裹，在这里写的时aa()函式；在这个函式中进行infobox.scrollTop++；但是这样也只能只能执行一次，所以把t = setInterval("scrollup()",time)这个放进了这个函式，当infobox.scrollTop++完后，执行这个定时器，这个定时器来继续调用scrollup()函式，这样就会一直循环执行这个间歇式滚动样式。

[code]clearInterval(t);//当infobox.scrollTop能被lih高度整除则停止滚动
setTimeout("aa()",2000)//在2000毫秒触发这个事件

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航