滚动的公告栏

作者: 鲸林向海工作室 | 来源:发表于2018-04-04 11:30 被阅读0次

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

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

标签源码

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

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

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

image

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

-js原生实现
-demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label</title>
    <style>
        /*清除系统默认样式*/
        * {
            margin: 0;
            padding: 0;
        }
        /*清除列表的默认样式*/
        ul {
            list-style: none;
        }

        #wrap {
            width: 100px;
            border: 1px solid #ababab;
            margin: 50px auto;
            /*设置元素居中*/
            text-align: center;
        }

        #title {
            height: 25px;
            overflow: hidden;
            border-bottom: 1px solid #f05e6f;
            color: red;
        }

        #content {
            height: 18px;
            width: 70px;
            margin-left: 15px;
            overflow: hidden;
            font-weight: bold;
        }
        /*设置li元素高度，以撑开ul容器，使其大于外部容器*/
        #wrap ul li {
            height: 20px;
        }


    </style>
</head>
<body>
<div  id="wrap">
    <h4 id="title">选标签</h4>
    <div  id="content">
        <ul id="box1">
            <li>中央空调</li>
            <li>知心朋友</li>
            <li>有为青年</li>
            <li>啰里啰嗦</li>
            <li>技术宅</li>
            <li>IT民工</li>
            <li>文艺青年</li>
            <li>潜力股</li>
            <li>月光族</li>
            <li>自由主义</li>
            <li>90后</li>
            <li>水瓶座</li>
            <li>起床困难</li>
            <li>工作狂</li>
            <li>浪漫温柔</li>
            <li>谦虚</li>
            <li>矫情</li>
            <li>暖男</li>
            <li>领导者</li>
            <li>单身狗</li>
            <li>阳光向上</li>
            <li>沉稳</li>
            <li>老男人</li>
        </ul>
        <ul id="box2"></ul>
    </div>
</div>
</body>
<script type="text/javascript">

    var content = document.getElementById('content');
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    //数值越大，滚动越缓慢
    var speed = 1;
    content.scrollTop = 0;
    //box2获取box1内容
    box2.innerHTML = box1.innerHTML;

    function scrollUp(){
        if(content.scrollTop >= box1.scrollHeight) {
            content.scrollTop = 0;
        }else{
            content.scrollTop ++;
        }
    }
    //创建定时器，实现滚动效果
    var textScroll = setInterval("scrollUp()",speed);
    //当鼠标移上消除定时器
    content.onmouseover = function(){
        clearInterval(textScroll);
    };
    //当鼠标离开打开定时器
    content.onmouseout = function(){
        textScroll = setInterval("scrollUp()",speed);
    };
</script>

</html>

词条：
scrollTop
scrollHeight

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

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

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

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

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