文章导航

单行新闻公告间歇垂直无缝滚动

2018-4-11 10:11| 发布者: admin| 查看: 371| 评论: 0|来自: 蚂蚁部落

单行垂直新闻公告效果应用非常广泛,本站也有使用。

效果特点:

(1).单行新闻垂直滚动。

(2).滚动具有间歇暂停效果。

(3).鼠标悬浮暂停滚动,鼠标离开继续滚动。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
  margin:0px;
}
ul li {
  height:20px;
}
.gonggao {
  height:20px;
  overflow:hidden
}
</style>
<script type="text/javascript">
let ann = () => {
  let stopscroll = false;
  let gonggaoBox = document.getElementsByClassName("gonggao")[0];
  let ulBox = gonggaoBox.getElementsByTagName("ul")[0];
  let ulBoxH = ulBox.offsetHeight;
  gonggaoBox.onmouseover = () => { stopscroll = true }
  gonggaoBox.onmouseout = () => { stopscroll = false }

  let currentTop = 0;
  let stoptime = 0;

  ulBox.innerHTML = ulBox.innerHTML + ulBox.innerHTML;
  
  let init_srolltext = () => {
    gonggaoBox.scrollTop = 0;
    setInterval(scrollUp, 15);
  }
  let scrollUp = () => {
    if (stopscroll) return;
    currentTop += 1;
    if (currentTop == 21) {
      stoptime += 1;
      currentTop -= 1;
      if (stoptime == 220) {
        currentTop = 0;
        stoptime = 0;
      }
    } else {
      gonggaoBox.scrollTop += 1;
      if (ulBoxH == gonggaoBox.scrollTop) {
        gonggaoBox.scrollTop = 0;
      }
    }
  }
  init_srolltext();
}

window.onload = function () {
  ann();
}
</script>
</head>
<body>
<div class="gonggao">
  <ul>
    <li>
      <span><a href="#">宗旨是分享免费文本教程</a></span><em>( 2018-04-11 )</em>
    </li>
    <li>
      <span><a href="#">网站近期改版</a></span><em>( 2018-04-05 )</em>
    </li>
  </ul>
</div>
</body>
</html>

上面代码实现了预期效果,下面介绍一下它的实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
* {
  margin:0px;
}

将所有元素的外边距设置为0。

[CSS] 纯文本查看 复制代码
ul li {
  height:20px;
}
.gonggao {
  height:20px;
  overflow:hidden
}

将li元素的高度设置为20px。

外层的容器gonggao高度也恰好是20px,超出的尺寸隐藏,这样就能恰好显示一行公告。

[JavaScript] 纯文本查看 复制代码
let ann = () => {
  //code
}

调用此箭头函数可以实现垂直带有暂停的滚动功能。

[JavaScript] 纯文本查看 复制代码
let stopscroll = false;
let gonggaoBox = document.getElementsByClassName("gonggao")[0];
let ulBox = gonggaoBox.getElementsByTagName("ul")[0];

声明变量stopscroll并初始化值为false,用来标识当前效果是否处于滚动状态,等于false表示处于滚动状态,等于true表示处于停止滚动状态。

然后获取class属性值为gonggao的第一个元素对象,也就是这里的div对象。

最后获取div下的ul元素对象。

[JavaScript] 纯文本查看 复制代码
let ulBoxH = ulBox.offsetHeight;

获取ul元素的高度。

[JavaScript] 纯文本查看 复制代码
gonggaoBox.onmouseover = () => { stopscroll = true }
gonggaoBox.onmouseout = () => { stopscroll = false }

注册事件处理函数,当鼠标移到div上时,将stopscroll设置为true,停止滚动。

当鼠标离开div时,将stopscroll设置为false,继续滚动。

[JavaScript] 纯文本查看 复制代码
let currentTop = 0;
let stoptime = 0;

声明两个变量,并赋初值为0,后面会有介绍。

[JavaScript] 纯文本查看 复制代码
ulBox.innerHTML = ulBox.innerHTML + ulBox.innerHTML;

将ul中的内容复制一份追加到原来的内容上。

比如原来有两个li元素如下:

[HTML] 纯文本查看 复制代码
<li>
  <span><a href="#">宗旨是分享免费文本教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">网站近期改版</a></span><em>( 2018-04-05 )</em>
</li>

通过复制追加之后变为:

[HTML] 纯文本查看 复制代码
<li>
  <span><a href="#">宗旨是分享免费文本教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">网站近期改版</a></span><em>( 2018-04-05 )</em>
</li>
<li>
  <span><a href="#">宗旨是分享免费文本教程</a></span><em>( 2018-04-11 )</em>
</li>
<li>
  <span><a href="#">网站近期改版</a></span><em>( 2018-04-05 )</em>
</li>

于是,向上滚动的时候,就会有头尾相接无缝的视觉效果,否则向上滚动,底部就会出现空缺。

[PHP] 纯文本查看 复制代码
let init_srolltext = () => {
  gonggaoBox.scrollTop = 0;
  setInterval(scrollUp, 15);
}

调用次函数开始进行滚动效果。

首先将div向上滚动的尺寸初始化为0,然后通过定时器函数每隔15毫秒调用一次scrollUp函数。

[JavaScript] 纯文本查看 复制代码
let scrollUp = () => {
  //code
}

此函数是效果的核心,下面会具体介绍。

[JavaScript] 纯文本查看 复制代码
if (stopscroll) return;

如果stopscroll值为真,那么直接跳出函数,也就是不滚动。

函数每执行一次,值加1,表示向上滚动了1px。

[JavaScript] 纯文本查看 复制代码
currentTop += 1;
if (currentTop == 21) {
  stoptime += 1;
  currentTop -= 1;
 if (stoptime == 220) {
  currentTop = 0;
  stoptime = 0;
 }
}

首先currentTop加1,然后判断此值是否等于21。

如果等于21,则说明已经完成一个完整的li元素上滚(li的高度是20px),然后进入暂停状态。

stoptime变量作为一个计量,值在0-220之间,滚动都处于暂停状态。

currentTop值减1,为了保持currentTop值在暂停期间是不变的。

最后判断currentTop是否等于220(暂停状态已经达到临界时间)。

如果等于,currentTop和stoptime重置为0。

[JavaScript] 纯文本查看 复制代码
else {
  gonggaoBox.scrollTop += 1;
  if (ulBoxH == gonggaoBox.scrollTop) {
    gonggaoBox.scrollTop = 0;
  }
}

如果currentTop不等于21,也就是currentTop在执行currentTop += 1前小于20,一次完整的li滚动并未完成。

那么继续继续向上滚动(gonggaoBox.scrollTop += 1)。

如果ulBoxH 等于 gonggaoBox.scrollTop,说明所有新闻公告完成一次滚动,这时候拷贝追加的第一个li处于当前位置;于是将gonggaoBox.scrollTop重置为0,这样在视觉上实现无缝的滚动效果。

二.相关阅读:

(1).getElementsByClassName()参阅JavaScript getElementsByClassName()一章节。

(2).getElementsByTagName()参阅JavaScript getElementsByTagName()一章节。

(3).offsetHeight参阅JavaScript offsetHeight一章节。

(4).onmouseover事件参阅JavaScript mouseover 事件一章节。

(5).onmouseout事件参阅JavaScript mouseout 事件一章节。

(6).innerHTML参阅JavaScript innerHTML 属性一章节。

(7).scrollTop参阅JavaScript scrollTop一章节。

(8).setInterval()参阅JavaScript setInterval()一章节。

(9).箭头函数参阅JavaScript 箭头函数介绍一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部