信息滚动效果

关于滚动的那些事，相信不少的小伙伴都知道，在做网页动态效果时，时常有需求是关于滚动效果的实现的。在360或搜狐等门户网站的首页中，我们也时常见到这种效果。

以上是从360导航中截取的，都是信息滚动效果。今天我们要来实现下面这个小例子。效果可以有两种，分别是无缝滚动和间歇性无缝滚动。

首先是无缝滚动的效果。

以下是我简单的介绍这个例子的主要思路。就是先把1的内容复制出一个2的内容出来，这样就可以在滚动1内容要结束时，连上2内容的滚动，达到无缝滚动效果；然后当1内容刚好被滚动完时，马上把1内容跳到最开始的位置。这样就实现了可以一直滚动下去的效果了。

在开始前，我们要知道几个js的属性（很重要，要牢记！）：

obj.scrollTop //返回子元素被滚动了多少像素（注意，obj为滚动元素的父元素）

obj.offsetHeight //返回元素的自身高度

obj.scrollHeight //返回 自身元素的高度+隐藏子元素的高度（注意，obj为滚动元素的父元素）

好了，开始码代码，首先是HTML结构和css样式：

效果如下：

接下来就是使用原生js让文字滚动起来了。

先获取整个box和内容con1，再复制一个内容出来

接着我们自定义一个函数scrollUp，在里面实现刚才说到的实现思路。具体是当被滚动出去的内容高度大于等于con1内容的高度，我们就将滚动出去的高度设置0；否则我们就继续给滚动自增，知道上面条件满足。

接着就设置一个setInterval函数了，来个50毫秒执行一次吧

这样，就实现了文字在box区域中的滚动效果了：

现在内容是在无缝滚动了，我们可以加个鼠标滑过时停止滚动，鼠标移出时继续滚动的效果。

这部分就很简单了，只是加了鼠标移入移出的事件而已，在里面设置清除定时器和执行定时器，完整代码如下：

接下来，我们来实现另一个效果，即间歇性循环滚动，就是比如滚动第一段内容后，停顿两秒，然后再继续滚动下一段内容，在停顿两秒......

当然，想到要停顿两秒，我们在脑海中就浮现出setTimeout这个函数了

接下来我们要改一下HTML结构，因为在上面的例子中，我们多写了一个ul结构，很多余，我们去掉这个ul：

现在就只剩下con1内容了，但我们还是可以再复制出一个con1顶替在con2位置上的，就是使用+=运算符。

接下来我们使用一个函数来执行一直滚动的角色。

接着实现角色中调用的scrollUp函数。

具体思路如下，先判断是否滚动了一段文字，如果是的话就清除掉time这个定时器，等两秒后再执行。如果还没滚动一段文字时，就继续滚动，直到符合条件。

这样就实现了间歇性滚动，接下来是实现无限循环滚动效果，跟一开始的那个demo的思路一样，当con1刚好完全滚动出去时，马上让其跳回原来的位置即可。

都完成了，最后启动一下startMove函数即可，我们还是一样用两秒来启动函数

完整代码如下：

好了，今天就到这里了，明天就是中秋了，在这儿祝各位都平平安安，与家人团团圆圆，幸福美满。

最后，别忘了要保持学习的习惯。。。