滚动的公告栏

作者博客：漂小泊的博客
作者主站：小泊随記
原文地址：文章地址

因为心无所恃，所以才随遇而安。

标签源码

在小泊的介绍页里，引入了一个"标签图"，大家可以使用手机或者计算机的截屏功能，随机的将当前屏幕截下，最终标签图中显示的内容，就是你给小泊贴的"标签"啦。

其实呢，实现的原理很简单。

首先小泊先展示一下，小泊截到的标签(^▽)：

image

源码（这里加入了鼠标悬停的效果）：

-js原生实现
-demo

词条：
scrollTop
scrollHeight

Ps：
有专业工具的朋友，可以将以上代码直接复制进html文件中，运行即可。
如果没有专业工具的朋友，可以将以上代码直接复制进文本.txt文件中，然后将.txt改为.html双击打开即可。

这样的话，我们就实现了"文字循环滚动"的效果。

其实很多小的功能，通过CSS样式和布局，就会有一些令人意想不到的效果发生。在这里呢，小泊也建议朋友们，在日常的学习或者工作中，可以通过小的点去辐射大的面，尤其是在技术的学习过程中尤为重要。在前端中，往往看上去很多炫酷、很复杂的效果都是由很多小的简单的部分组合而成，可能在某些情况下通过插件或者框架来实现会更简单，但不可否认的是，插件或者框架也是集合了基础的功能组合而成，本质是没有改变的。

就像小泊之前维护服务器和软件也是如此。

那么接下来，我们一起来丰富一下这个"滚动窗口"，实现我们日常生活中在网页中常见的"滚动的公告栏"效果。